使用 jQuery 设置下拉列表的选定索引答案

【问题标题】：Set the selected index of a Dropdown using jQuery使用 jQuery 设置下拉列表的选定索引
【发布时间】：2010-11-21 19:17:37
【问题描述】：

如果我找到控件的方式如下，如何在 jQuery 中设置下拉列表的索引：

$("*[id$='" + originalId + "']")

我这样做是因为我正在动态创建控件，并且由于在使用 Web 窗体时会更改 id，因此我发现这是为我找到一些控件的一种解决方法。但是一旦有了 jQuery 对象，我就不知道如何将选定的索引设置为 0（零）。

【问题讨论】：

标签： jquery

【解决方案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 中可能不起作用。查看接受的答案：stackoverflow.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>

【讨论】：