195

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

在此页面上，描述了两种方法。但是，两者总是返回-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()返回正确的值，这让我更加困惑。

4

8 回答 8

382

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

只需使用selectedIndexDOM 元素的属性：

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

更新：

自 1.6 版以来，jQuery 具有prop可用于读取属性的方法：

alert($("#dropDownMenuKategorie").prop('selectedIndex'));
于 2012-11-26T00:05:24.903 回答
99

用 Jquery 方式解决这个问题的好方法

$("#dropDownMenuKategorie option:selected").index()
于 2014-06-24T17:48:55.233 回答
20

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

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

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

$(selectElement).prop('selectedIndex', savedIndex);
于 2015-07-03T04:44:29.953 回答
19

根据 user167517 的回答，我有一个稍微不同的解决方案。在我的函数中，我使用一个变量作为我要定位的选择框的 id。

var vOptionSelect = "#productcodeSelect1";

索引返回：

$(vOptionSelect).find(":selected").index();
于 2014-08-20T04:59:07.183 回答
7

尝试这个

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
于 2012-11-26T06:59:54.803 回答
6

selectedIndex是一个 JavaScript 选择属性。对于 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());
  });
});
于 2015-01-23T10:49:37.400 回答
3

您可以使用 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>
于 2016-02-15T06:52:52.470 回答
0 
<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>

$(document).ready(function(){
    $("#dropDownMenuKategorie").change(function(){
       var selIndex = $(this).prop('selectedIndex');
       var selVal = $("#dropDownMenuKategorie option:selected").val();
       var selText = $("#dropDownMenuKategorie option:selected").text();
       console.log(selIndex + selVal + selText );
    });
});
于 2021-11-08T12:22:23.843 回答