如何获取 select->option 标签的索引答案

【问题标题】：How to get the Index of select->option tag如何获取 select->option 标签的索引
【发布时间】：2010-12-21 11:38:31
【问题描述】：

<select id="sel">
<option value="123" selected="selected">text1</option>
<option value="44">text2</option>
<option value="882">text3</option>
...
</select>

如何使用 jQuery 获取所选选项的索引？可能是.index(subject)，但所有可能性都经过测试，但没有奏效...

附：索引：value="123" => 0, value="44" => 1, ...

感谢

【问题讨论】：

标签： jquery indexing

【解决方案1】：

你实际上可以不用 jQuery 来做到这一点： var sel = document.getElementById( 'sel' ); var index = sel.selectedIndex;

【讨论】：

【解决方案2】：

这样就可以了：

   $("#sel").attr("selectedIndex")

【讨论】：

这混淆了 attr 和 prop 之间的区别。请注意，在此示例中更改下拉列表中的选定项后， selectedIndex 不会更改，并且不正确：jsfiddle.net/b9chris/wxeVN
这是错误的。 attr("selectedIndex") 什么都不做，你需要prop("selectedIndex")。演示：jsfiddle.net/Nj85e
请注意，我的答案写于 2009 年 - 当时它是正确的。 jQuery 从那时起发生了变化..
根据api.jquery.com/prop 在这种特殊情况下.prop() 是正确的不是.attr()
attr 不行，你需要更改为 prop，或使用 [0].selectedIndex 访问 dom 元素而不是 jquery 对象

【解决方案3】：

$("#sel").attr("selectedIndex")

或

$("#sel")[0] //to get the DOM element
$("#sel")[0].selectedIndex

【讨论】：

这是错误的。 attr("selectedIndex") 什么都不做，你需要 prop("selectedIndex")。演示：jsfiddle.net/Nj85e

【解决方案4】：

在这种情况下，您可以通过检查所选元素之前有多少兄弟元素来获取元素的索引：

$('#sel option:selected').prevAll().length;

【讨论】：

这似乎是一个关于获取所选索引的方法，prevAll 的成本是多少？
你是对的，在这种情况下检查 selectedIndex 更好。然而 prevAll() 应该比在这里摆弄本机 .index() 方法更快，这是 OP 的初始解决方案（除非使用 jQuery 1.3.3）

【解决方案5】：

只有鲍勃的第二个答案是正确的：

$("#sel")[0].selectedIndex

作品： http://jsfiddle.net/b9chris/wxeVN/1/

使用.attr() 仅在用户（或浏览器的 DOM 恢复）自页面加载后未更改选择的选项时才有效： http://jsfiddle.net/b9chris/wxeVN/

您可以将其实现为 jQuery 扩展，并在此过程中获得更多信息：

(function($) {
    $.fn.selectedOption = function() {
        var sel = this[0];
        return sel.options[sel.selectedIndex];
    };
})(jQuery)

$('button').click(function() {
    $('#output').text('selected index: ' + $('select').selectedOption().index);
});

http://jsfiddle.net/b9chris/wxeVN/102/

.selectedOption() 返回的是实际的选项标签，因此您可以访问.index、.value 和.text - 比典型用法中的索引更方便。

【讨论】：

【解决方案6】：

在我写这篇文章时，尽管在近五年前被指出，但其中两个最重要的答案（包括公认的答案）是不正确的。 attr("selectedIndex") 什么都不做，因为 selectedIndex 是实际 DOM 元素的属性，而不是 HTML 属性。你需要使用prop:

$(this).prop('selectedIndex')

将此与错误版本进行比较的交互式演示：http://jsfiddle.net/uvwkD/

【讨论】：

【解决方案7】：

使用 jquery 的标准索引功能，就像在这个代码示例中一样

$("#sel option:selected").index()

【讨论】：

我发现这个最有用。当multiple=true时ESP。

【解决方案8】：

标题与问题不太相符...

如何获取select->option标签的索引

option.index // javascript

$(option).prop('index') // jquery

选中的索引选择->选项标签：

document.getElementById('sel').selectedIndex // javascript

【讨论】：