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'));

Answer 2

以Jquery方式解决此问题的好方法

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

Answer 3

根据user167517的回答，我的解决方案略有不同。在我的功能中，我使用变量作为我定位的选择框的ID。

var vOptionSelect = "#productcodeSelect1";

索引返回时为：

$(vOptionSelect).find(":selected").index();

Answer 4

您可以使用.prop(propertyName)函数从jQuery对象的第一个元素中获取属性。

var savedIndex = $(selectElement).prop('selectedIndex');

这使您的代码保持在jQuery领域内，并且还避免使用选择器来查找所选选项的其他选项。然后，您可以使用重载来恢复它：

$(selectElement).prop('selectedIndex', savedIndex);

Answer 5

试试这个

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);

Answer 6

selectedIndex是JavaScript Select Property。对于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());
  });
});

Answer 7

您可以使用JQuery的.prop（）方法获取选择框的索引

检查：

<!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>

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

7 个答案:

更新