时间戳

首页 > 解决方案 > 从选项中获取文本

javascript - 从选项中获取文本

问题描述

我有一个选择标签，我正在尝试获取我单击的选项的文本，因为我想使用该文本来执行一些任务：

我的html文件：

            <select name="ciao" id="yui_3_17_2_1_1631285726939_22">
               <option id="search" value="search" name="search">Giulia Totti</option>
               <option id="search" value="search" name="search">annalisa costa</option>
               <option id=" search" value="search" name="search">Isidoro Tricarico</option>
               <option id="search" value="search" name="search">Carmela Maria 
               Graziano</option>
               <option id="search" value="search" name="search">Chiara Dra</option>
               <option id="search" value="search" name="search">Tommaso Condello</option>
               <option id="search" value="search" name="search">Andrea Leoni</option>
               <option id="search" value="search" name="search">Giulia Totti</option>
               <option id="search" value="search" name="search">Adnan Al Aghawani</option>
               <option id="search" value="search" name="search">Chiara Dra</option>
               <option id="search" value="search" name="search">Serena Fossati</option>
             </select>

我的 JS 文件：

             function init() {
               var me = $(this);
               var meIndex = me.index();
               $('select').click(function() {
                     console.log($('option').text());
               })
              }

              $(document).ready(init);

              **I also tried**

              function init() {
                 var me = $(this);
                 var meIndex = me.index();
                 me.click(function() {
                 console.log(me.text());
                })
              }

               $(document).ready(init);

我究竟做错了什么？

标签： javascriptjquery

解决方案

听起来您想在选择时将所选选项的文本记录到控制台。那将是这样的：

$('#yui_3_17_2_1_1631285726939_22').on('change', function () {
  console.log($(this).find('option:selected').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="ciao" id="yui_3_17_2_1_1631285726939_22">
  <option id="search" value="search" name="search">Giulia Totti</option>
  <option id="search" value="search" name="search">annalisa costa</option>
  <option id="search" value="search" name="search">Isidoro Tricarico</option>
  <option id="search" value="search" name="search">Carmela Maria Graziano</option>
  <option id="search" value="search" name="search">Chiara Dra</option>
  <option id="search" value="search" name="search">Tommaso Condello</option>
  <option id="search" value="search" name="search">Andrea Leoni</option>
  <option id="search" value="search" name="search">Giulia Totti</option>
  <option id="search" value="search" name="search">Adnan Al Aghawani</option>
  <option id="search" value="search" name="search">Chiara Dra</option>
  <option id="search" value="search" name="search">Serena Fossati</option>
</select>

基本上，您将响应元素的change事件（而不是click事件），<select>并且在该事件中，您会在该元素中找到所选<option>内容并获取其文本。

请注意：目前您的标记无效。您有多个具有相同id. 虽然这不会导致此处构建的功能出现任何问题，但它很容易导致其他功能出现问题。始终使用有效的 HTML。在这种情况下，您可能希望删除所有这些id="search"属性。

所有这些元素都具有相同的. 而且它们都不需要属性，只有表单元素本身需要它，它目前有（）。<option>valuenamename="ciao"

把所有这些放在一起，这对我来说更有意义，至少在这个问题中这段代码的有限上下文中：

$('#yui_3_17_2_1_1631285726939_22').on('change', function () {
  console.log($(this).find('option:selected').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="ciao" id="yui_3_17_2_1_1631285726939_22">
  <option value="0">Giulia Totti</option>
  <option value="1">annalisa costa</option>
  <option value="2">Isidoro Tricarico</option>
  <option value="3">Carmela Maria Graziano</option>
  <option value="4">Chiara Dra</option>
  <option value="5">Tommaso Condello</option>
  <option value="6">Andrea Leoni</option>
  <option value="7">Giulia Totti</option>
  <option value="8">Adnan Al Aghawani</option>
  <option value="9">Chiara Dra</option>
  <option value="10">Serena Fossati</option>
</select>

但是，如果您有其他代码在某种程度上依赖于没有意义的部分，那么这种更改可能会破坏该代码。但我强烈建议您更正任何此类依赖项，以便您也可以更正此标记。

推荐阅读