使用jQuery获取所选选项的索引
我有点困惑如何从HTML <select>项目获取选定的选项的索引。
在这个页面上描述了两种方法。 但是，两者总是返回-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> (...)
为什么这种行为？ 在分配change()方法的时刻， select是不是“准备好”的机会？ 另外，将.index()更改为.val()会返回正确的值，所以这就更加困惑了。
第一种方法似乎在我testing过的浏览器中工作，但是选项标签并不真正对应于所有浏览器中的实际元素，因此结果可能会有所不同。
只需使用DOM元素的selectedIndex属性即可：
alert($("#dropDownMenuKategorie")[0].selectedIndex);
更新：
从版本1.6开始，jQuery拥有可用于读取属性的prop方法：
alert($("#dropDownMenuKategorie").prop('selectedIndex'));
很好的方式来解决这个问题的方式
$("#dropDownMenuKategorie option:selected").index()
基于user167517的回答，我有一个稍微不同的解决scheme。 在我的函数中，我正在使用一个variables作为我select的select框的ID。
var vOptionSelect = "#productcodeSelect1";
索引返回：
$(vOptionSelect).find(":selected").index();
您可以使用.prop(propertyName)函数从jQuery对象的第一个元素获取属性。
var savedIndex = $(selectElement).prop('selectedIndex');
这将您的代码保存在jQuery领域，并避免使用select器来查找选定选项的其他选项。 然后您可以使用重载来恢复它：
$(selectElement).prop('selectedIndex', savedIndex);
尝试这个
alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
selectedIndex是一个JavaScriptselect属性。 对于jQuery，你可以使用这个代码：
jQuery(document).ready(function($) { $("#dropDownMenuKategorie").change(function() { // I personally prefer using console.log(), but if you want you can still go with the alert(). console.log($(this).children('option:selected').index()); }); });
您可以使用JQuery的.prop（）方法获取select框的索引
检查这个：
<!doctype html> <html> <head> <script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ }); function check(){ alert($("#NumberSelector").prop('selectedIndex')); alert(document.getElementById("NumberSelector").value); } </script> </head> <body bgcolor="yellow"> <div> <select id="NumberSelector" onchange="check()"> <option value="Its Zero">Zero</option> <option value="Its One">One</option> <option value="Its Two">Two</option> <option value="Its Three">Three</option> <option value="Its Four">Four</option> <option value="Its Five">Five</option> <option value="Its Six">Six</option> <option value="Its Seven">Seven</option> </select> </div> </body> </html>
