如何使用 jQuery 在下拉列表中通过其文本值选择一个项目？答案

【问题标题】：How do I select an item by its text value in a dropdown using jQuery?如何使用 jQuery 在下拉列表中通过其文本值选择一个项目？
【发布时间】：2010-09-19 11:53:36
【问题描述】：

如果我有以下选择，并且不知道用于提前选择项目的值，例如 question 或我想要选择的项目的索引，我怎么能用 jQuery 选择其中一个选项如果我确实知道选项 C 之类的文本值？

<select id='list'>
<option value='45'>Option A</option>
<option value='23'>Option B</option>
<option value='17'>Option C</option>
</select>

【问题讨论】：

嘿 - 我 /thought/ 这看起来很眼熟！

标签： javascript jquery dom

【解决方案1】：

$("#list option").each(function() {
  this.selected = $(this).text() == "Option C";
});

【讨论】：

我整个下午都在和这个作斗争。我有在 jQuery 1.6.1 之前工作的代码，例如$(this).find('option[text="sometext"]).val();其中 $(this) 是一个选择元素，但由于某种原因，该代码只是返回未定义。我使用了你的答案@Pavel，我认为这很好而且简洁，并且让我的代码再次运行。谢谢！我仍然很想知道为什么旧代码停止工作......？

【解决方案2】：

function SelectItemInDropDownList(itemToFind){    
         var option;
         $('#list option').each(function(){
             if($(this).text() == itemToFind) {
                 option = this;
                 option.selected = true;
                 return false;    
                }
           });  }

我只修改了之前的代码，因为它只定位了选择列表中的选项，有些人可能想要文字演示。

【讨论】：

【解决方案3】：

这应该可以解决问题：

// option text to search for
var optText = "Option B";
// find option value that corresponds
var optVal = $("#list option:contains('"+optText+"')").attr('value');
// select the option value 
$("#list").val( optVal )

正如 eyelidlessness 指出的那样，当正在搜索的文本可以在多个选项中找到时，这将表现得不可预测。

【讨论】：

问题在于它也会匹配带有文本“Not Option B”或“Option B12”的选项（显然超出了示例的范围，但示例显然是人为的）。
如果你想要完全匹配而不是“字符串中的某处”，你可以使用 option[text="optText"] 而不是 contains。
@Scott 自从升级到 jQuery 1.6.1（和 1.6.2）以来，我一直在努力让它工作。请参阅下面 Pavel 回答中的评论。
@CarvellFenton - 从 jQuery 1.6 开始，您需要添加一个冒号才能按文本查找。见下文 - stackoverflow.com/a/13686092/609176

【解决方案4】：

var option;
$('#list option').each(function() {
    if($(this).text() == 'Option C') {
        option = this;
        return false;
    }
});

【讨论】：

这是一个新手问题我敢肯定，但是设置 option = this;在上面的代码中做什么？
@Carvell, option 在第 1 行被实例化，在外部范围内，但它的值是 undefined。通过在第 4 行设置option，外部范围内的option 现在是文本值为'Option C' 的DOM 元素。在.each 循环之后，在外部范围内，option 可用于引用该特定元素。
啊，好吧。这就说得通了。我在想它应该在我缺少的每个功能中做一些事情。我了解外部范围使用的设置:) 谢谢。