关于javascript：jQuery获取特定的选项标签文本


jQuery get specific option tag text

好吧，假设我有这个：

1
2
3
4
5
<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

当我有值"2"时，如果我想得到"选项B"，选择器会是什么样子？

请注意，这不是询问如何获取所选文本值，而是仅询问其中任何一个值，无论是否选中，具体取决于值属性。我试过：

1
$("#list[value='2']").text();

但它不起作用。

相关讨论

如果要获得值为2的选项，请使用

1
$("#list option[value='2']").text();

如果您希望获得当前选定的选项，请使用

1
$("#list option:selected").text();
相关讨论

它正在查找ID为list的元素，该元素的属性value等于2。你想要的是list的option子代。

1
$("#list option[value='2']").text()
相关讨论

这对我来说非常有效，我正在寻找一种方法，通过MySQL生成的选项发送两个不同的值，下面是通用的和动态的：

$(this).find("option:selected").text();

如其中一条评论所述。有了这个，我就可以创建一个动态函数，它可以处理我所有的选择框，我想得到两个值、选项值和文本。

几天前我注意到，当我将jquery从站点的1.6更新到1.9时，使用了这个代码，这个停止工作…可能是与另一段代码冲突…无论如何，解决方案是从find()调用中移除选项：

1
$(this).find(":selected").text();

那是我的解决方案…只有在更新jquery后出现问题时才使用它。

相关讨论

基于Paolo发布的原始HTML，我提出了以下建议。

1
2
3
$("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

它已经在Internet Explorer和Firefox上测试过。

相关讨论

1
2
3
$("#list option:selected").each(function() {
   alert($(this).text());
});

用于#list元素中的多个选定值。

  • 如果页面上只有一个select标记，则可以在id"list"中指定select

    1
    jQuery("select option[value=2]").text();

  • 获取所选文本

    1
    jQuery("select option:selected").text();

    • 请尝试以下操作：

    1
    $("#list option[value=2]").text();

    您的原始代码片段不起作用的原因是因为您的option标记是SELECT标记的子代，该标记具有idlist。

    相关讨论

    这是一个旧问题，在一段时间内没有更新，现在正确的方法是使用

    1
    2
    3
    $("#action").on('change',function() {
        alert($(this).find("option:selected").text()+' clicked!');
    });

    我希望这有帮助：—)

    相关讨论

    1
    $(this).children(":selected").text()
    相关讨论

    我想得到选定的标签。这在jquery 1.5.1中对我很有用。

    1
    $("#list :selected").text();

    您可以使用函数.text();获得所选的选项文本。

    您可以这样调用函数：

    1
    jQuery("select option:selected").text();
    1
    $("#list [value='2']").text();

    在ID选择器后面留一个空格。

    在动态创建带有.each(function()..)的select元素时，"循环"：$("option:selected").text();和$(this +" option:selected").text()没有返回所选选项文本，而是返回空。

    但彼得·莫特森的解决方案奏效了：

    1
    $(this).find("option:selected").text();

    我不知道为什么通常的方法不能在一个江户中成功(可能是我自己的错误)，但谢谢你，彼得。我知道这不是最初的问题，但我提到它"对于通过谷歌来的新手"。

    我本来可以从$('#list option:selected").each()开始，但我也需要从select元素中获取一些东西。

    用途：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function selected_state(){
        jQuery("#list option").each(function(){
            if(jQuery(this).val() =="2"){
                jQuery(this).attr("selected","selected");
                return false;
            }
        });
    }

    jQuery(document).ready(function(){
        selected_state();
    });

    我在寻找通过内部字段名而不是ID获取VAL的方法，从Google发到这篇文章，这篇文章有帮助，但没有找到我需要的解决方案，但我得到了解决方案，这里是：

    因此，这可能有助于某些人查找具有字段内部名称的选定值，而不是为SharePoint列表使用长ID:

    1
    var e = $('select[title="IntenalFieldName"] option:selected').text();
    相关讨论

    我需要这个答案，因为我正在处理一个动态投射对象，而这里的其他方法似乎不起作用：

    1
    element.options[element.selectedIndex].text

    当然，这会使用dom对象，而不是使用nodeValue、childnodes等解析其HTML。

    提示：如果您的值是动态的，则可以使用以下代码：

    1
    $("#list option[value='"+aDynamicValue+"']").text();

    或(更好的样式)

    1
    2
    3
    $("#list option").filter(function() {
         return this.value === aDynamicValue;
    }).text();

    如jquery中所述，获取特定的选项标记文本并将动态变量放置到该值

    作为另一种解决方案，您还可以使用jquery选择器的上下文部分在下拉列表中查找元素和value="2"元素：

    1
    $("option[value='2']","#list").text();

    我想为select multiple提供一个动态版本，它可以显示右边选择的内容(希望我能继续阅读并看到$(this).find……更早)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <script type="text/javascript">
        $(document).ready(function(){
            $("select[showChoices]").each(function(){
                $(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'>&nbsp;</span>");
                doShowSelected($(this).attr('id'));//shows initial selections
            }).change(function(){
                doShowSelected($(this).attr('id'));//as user makes new selections
            });
        });
        function doShowSelected(inId){
            var aryVals=$("#"+inId).val();
            var selText="";
            for(var i=0; i<aryVals.length; i++){
                var o="#"+inId+" option[value='"+aryVals[i]+"']";
                selText+=$(o).text()+"";
            }
            $("#spn"+inId).html(selText);
        }

    <select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
        <option selected="selected" value=1>opt 1</option>
        <option selected="selected" value=2>opt 2</option>
        <option value=3>opt 3</option>
        <option value=4>opt 4</option>
    </select>

    你可以用以下方法之一

    1
    2
    3
    4
    5
    6
    7
    $("#list").find('option').filter('[value=2]').text()

    $("#list").find('option[value=2]').text()

    $("#list").children('option[value=2]').text()

    $("#list option[value='2']").text()

    1
    2
    3
    4
    5
    6
    7
    8
    $(function(){    
       
        console.log($("#list").find('option').filter('[value=2]').text());
        console.log($("#list").find('option[value=2]').text());
        console.log($("#list").children('option[value=2]').text());
        console.log($("#list option[value='2']").text());
       
    });
    1
    2
    3
    4
    5
    6
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    <select id='list'>
        <option value='1'>Option A</option>
        <option value='2'>Option B</option>
        <option value='3'>Option C</option>
    </select>

    如果要获取所选值，请执行以下操作：

    1
    $("#list option:selected").text();
    相关讨论