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

171

我对如何从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>
(...)

为什么会这样呢？select分配其change()方法时，是否有可能尚未“就绪” ？此外，换.index()到.val()的返回正确的值，所以这是混淆了我，甚至更多。

— 华伦天奴
source

1

这样一个古老的问题，但真正的问题是[name=]在select id上使用它。下面的- [0].selectedIndex和option:selected答案都可以。

— diynevala 2015年

338

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

只需使用selectedIndexDOM元素的属性即可：

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

更新：

从1.6版开始，jQuery具有prop可用于读取属性的方法：

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

— 古法
source

7

为什么[0]呢？

— Joan.bdm 2014年

33

@ Joan.bdm jQuery没有selectedIndex属性。添加[0]将jquery对象转换为具有该selectedIndex属性的javascript对象。没有这个示例就无法使用[0]

— Aram 2014年

@JasonL .：selectedIndex是一个属性，没有对应的属性。该attr方法可能可以读取1.6之前的版本中的属性，但不能从该版本中读取。

— 古法（Guffa）2015年

@Guffa关于为什么为什么selectedIndex不能从第一个选项的0开始的想法？

— adamj

1

@adamj：那你做错了什么。该selectedIndex属性基于零。我检查了文档，甚至亲自尝试了一下，以真正100％地确定这一点。

— Guffa

95

解决这个问题的好方法

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

— 用户名
source

2

我喜欢这个答案不需要[0]OP的首选答案，作为python开发人员，我真的很欣赏这个答案的可读性。

— NuclearPeon 2014年

4

OP已经尝试过了。该代码与问题中的第一种方法相同。

— Guffa 2014年

18

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

var vOptionSelect = "#productcodeSelect1";

索引返回：

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

— 幸运儿
source

17

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

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

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

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

— 尼克·贝德福德
source

6

试试这个

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

— 拉杰什·卡卡瓦特
source

7

jQuery不足

— sohaiby

1

什么是所有警报？

— Beanwah，2015年

3

@Beanwah-这是测试任何东西的最佳方法！;）

— JoePC '18

@JoePC没有它不是。console.log（）会做得更好

@ reiner.luke-;）=

— 滑稽-JoePC

6

selectedIndex是一个JavaScript Select属性。对于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());
  });
});

— Rishi Kulshreshtha
source

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>

— 尼哈里卡·比拉里（Niharika Birari）
source