使用 jQuery 设置下拉列表的选定索引
Posted
技术标签:
【中文标题】使用 jQuery 设置下拉列表的选定索引【英文标题】：Set the selected index of a Dropdown using jQuery 【发布时间】：2010-11-21 19:17:37 【问题描述】：如果我找到控件的方式如下，如何在 jQuery 中设置下拉列表的索引：
$("*[id$='" + originalId + "']")
我这样做是因为我正在动态创建控件，并且由于在使用 Web 窗体时会更改 id，因此我发现这是为我找到一些控件的一种解决方法。但是一旦有了 jQuery 对象，我就不知道如何将选定的索引设置为 0（零）。
【问题讨论】：
【参考方案1】：首先 - 选择器非常慢。它将扫描每个 DOM 元素以查找 id。如果您可以为元素分配一个类，那么对性能的影响会更小。
$(".myselect")
不过，要回答您的问题，有几种方法可以更改 jQuery 中的选择元素值
// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0');
// sets selected index of a select box to the option with the value ""
$("select#elem").val('');
// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;
// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);
【讨论】：
有更好的方法吗？我认为它会扫描整个 DOM 以匹配 ID，但由于我是 jQuery 新手，我想，让我们让它工作，然后看看是否有更好的方法来做到这一点。任何建议将不胜感激。 是的 - 如果您可以为需要查找的元素分配一个类，那将是一个更快的选择器。 @gnarf ID 不是更快吗？#an-id 更快，但*[id$=ends-with] 更慢，这就是“为元素分配类”的含义
如果我有多个具有不同选定索引值的 ASP.net DropDownList 怎么样？【参考方案2】：
刚找到这个，它对我有用，我个人觉得它更容易阅读。
这将设置实际索引，就像 gnarf 的答案号 3 选项一样。
// sets selected index of a select box the actual index of 0
$("select#elem").attr('selectedIndex', 0);
这在过去不起作用，但现在可以...查看错误： http://dev.jquery.com/ticket/1474
附录
按照 cmets 的建议使用：
$("select#elem").prop('selectedIndex', 0);
【讨论】：
从 jQuery 1.6 开始，无论.attr() 是否有效，您都应该使用.prop('selectedIndex', 0); :)
正确，实际上它在 1.7 中可能不起作用。查看接受的答案：***.com/questions/8010664/…
附录 +1。由于这个问题，我的旧代码被破坏了【参考方案3】：
我在 2015 年写了这个答案，出于某种原因（可能是旧版本的 jQuery），其他答案都没有对我有用。我的意思是，他们更改了选定的索引，但它实际上并没有反映在实际的下拉列表中。
这是另一种更改索引的方法，实际上是让它反映在下拉列表中：
$('#mydropdown').val('first').change();
【讨论】：
感谢您的回答。只有这个答案对我有用 同样在 2015 年，我对prop('selectedIndex', ...);（使用 Chrome 和 Firefox 测试）更改选择没有任何问题。
对于它的价值，应该指出你在这里做的不同是在下拉菜单上触发 change 事件，这对于那些正在通过调用prop('selectedIndex', ...) 而不是val(...) 来更改选择。也许问题在于您正在收听change 事件，而这对您不起作用？确实，简单地更改 property 不会触发任何事件...【参考方案4】：
JQuery 代码：
$("#sel_status").prop('selectedIndex',1);
jsp代码：
Status:
<select name="sel_status"
id="sel_status">
<option value="1">-Status-</option>
<option>ALL</option>
<option>SENT</option>
<option>RECEIVED</option>
<option>DEACTIVE</option>
</select>
【讨论】：
【参考方案5】：我正在使用
$('#elem').val('xyz');
选择具有 value='xyz' 的选项元素
【讨论】：
【参考方案6】：你想获取选择元素中第一个选项的值。
$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));
【讨论】：
【参考方案7】：选择第二个选项
$('#your-select-box-id :nth-child(2)').prop('selected', true);
这里我们添加 `trigger('change') 来触发事件。
$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');
【讨论】：
这是一个更好的答案。【参考方案8】：这在 chrome 和 Internet Explorer 中也可以正常工作
$("#MainContent_cmbEvalStatus").prop("selectedIndex", 1).change();
根据你选择的DropDown位置值放0,1,2,3,4.....
【讨论】：
【参考方案9】：$("[id$='" + originalId + "']").val("0 index value");
将其设置为 0
【讨论】：
不确定这是否只是旧的但在 2022 年 1 月不起作用 @Ihopethisishelpfultoyou 我指的是类似于 MacAnthonys 的回应。您不应该包含0 index value 的实际文本，而是包含 0 索引的选项值。他的回答会动态地在 0 索引处提取选项的值，因此会产生相同的结果，除非他可以在任何情况下工作，因为不必对值进行硬编码。【参考方案10】：
选择第四个选项
$('#select').val($('#select option').eq(3).val());
example on jsfiddle
【讨论】：
有效的解决方案... 代码混淆竞赛！ :)【参考方案11】：这将起作用：
<head>
<script type="text/javascript">
function Init ()
var counter = document.getElementById ("counter");
for (var i = 1; i < 1000; i++)
var option = new Option (i, i);
counter.options.add (option);
counter.focus ();
function OnKeyPressCounter (event, counter)
var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
if (chCode == 68 /* + */)
if (counter.selectedIndex < counter.options.length - 1)
counter.selectedIndex++;
if (chCode == 45 /* - */)
if (counter.selectedIndex > 0)
counter.selectedIndex--;
</script>
</head>
<body onload="Init ()">
Use the + and - keys to increase/decrease the counter.
<select id="counter" onkeypress="OnKeyPressCounter(event, this)" style="width:80px"></select>
</body>
【讨论】：
以上是关于使用 jQuery 设置下拉列表的选定索引的主要内容，如果未能解决你的问题，请参考以下文章
如何为多个下拉菜单设置 jquery select2 的选定值？