jquery - 使用 jQuery 获取所选选项的索引

Question

我对如何从 HTML <select> 获取选定选项的索引有点困惑。项目。

开启 this页面中有两种方法介绍。但是，两者总是返回 -1 .这是我的 jQuery 代码:

$(document).ready(function(){
    $("#dropDownMenuKategorie").change(function(){
        alert($("#dropDownMenuKategorie option:selected").index());
        alert($("select[name='dropDownMenuKategorie'] option:selected").index());
    });
});

在html中

(...)
<select id="dropDownMenuKategorie">
    <option value="gastronomie">Gastronomie</option>
    <option value="finanzen">Finanzen</option>
    <option value="lebensmittel">Lebensmittel</option>
    <option value="gewerbe">Gewerbe</option>
    <option value="shopping">Shopping</option>
    <option value="bildung">Bildung</option>
</select>
(...)

为什么会有这种行为？ select 有没有可能在分配其 change() 时尚未“准备好”方法？此外，更改 .index()至.val()正在返回正确的值，所以这让我更加困惑。

Answer 1

第一种方法似乎在我测试的浏览器中有效，但选项标签并不真正对应所有浏览器中的实际元素，因此结果可能会有所不同。

只需使用 DOM 元素的 selectedIndex 属性:

alert($("#dropDownMenuKategorie")[0].selectedIndex);

更新:

从 1.6 版开始，jQuery 有了 prop 方法，可以用来读取属性:

alert($("#dropDownMenuKategorie").prop('selectedIndex'));