如何使用 jquery 在组合框中选择一个条目？

Posted 2023-05-09

【中文标题】如何使用 jquery 在组合框中选择一个条目？

【英文标题】：How to select an entry in a combobox using jquery?

【发布时间】：2011-09-07 19:18:07

【问题描述】：

我有一个包含两个条目的 html 组合框。一个是空白的，另一个是一些文本。我不知道值是什么。

无论如何，通过使用 jquery（给定上面的约束），我可以在组合框中以编程方式选择包含文本的条目吗？

【问题讨论】：

请向我们展示 html 以及您尝试过的内容？

【参考方案1】：

这是一种方法

假设这是 html

<select size="5" id="foobar">
   <option value="">foo</option>
    <option value="bar">bar</option>
</select>

这里是jquery

$('#foobar option:nth-child(2)').prop('selected',true);

这是working demo

【讨论】：

值得注意的是，.prop('selected',true) 需要 jQuery 1.6+，而.attr('selected', 'selected') 适用于所有版本的 jQuery。

@Tomalak 是的，这是真的，我想指出这一点。我想用 1.6 的 prop 开始展示新方法

【参考方案2】：

这会选择第一个非空选项：

$("#mySelectBox").val(function() 
  for (var i = 0; i<this.options.length; i++) 
    if (this.options[i].text != "") return this.options[i].value;
  
);

如果文本可以包含空格，您可以使用$.trim(this.options[i].text)。

这是一个通用的解决方案，如果您确定始终要选择 second 选项，当然还有更简单的方法 - 请参阅mcgrailm's answer。

【参考方案3】：

如何排序列表：

$("#combo").html($("#combo option").sort(function (a, b) 
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
));

但出于兴趣，为什么选项没有选定的值 - 它是动态创建的？

【参考方案4】：

选择第一个非空选项的纯 JQuery 选择器（基于选项的文本）：

$('#myDropDown option:not(:empty):first')

使用以下示例：

<select size="5" id="foobar">
    <option value="emptyoption"></option>
    <option value="bar">bar</option>
</select>

这会选择“栏”选项：

$('#foobar option:not(:empty):first').prop('selected',true);

【讨论】：

这不起作用见fiddle。除非我遗漏了什么，否则它仍然会选择空项目

如果选项的文本为空，这确实有效。在您的示例中，该值为空而不是文本！从最初的问题中，我认为选项的文本是空白的......

好的，考虑到这种情况确实很糟糕，OP 似乎很高兴知道 html 真的看起来像