使用 jQuery 获取所选选项的索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13556941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get index of selected option with jQuery
提问by Valentino Ru
I'm a little bit confused about how to get an index of a selected option from a HTML <select>item.
我对如何从 HTML<select>项目中获取所选选项的索引有点困惑。
On thispage there are two methods described. However, both are always returning -1. Here is my jQuery code:
在此页面上描述了两种方法。然而，两者总是返回-1。这是我的 jQuery 代码：
$(document).ready(function(){
$("#dropDownMenuKategorie").change(function(){
alert($("#dropDownMenuKategorie option:selected").index());
alert($("select[name='dropDownMenuKategorie'] option:selected").index());
});
});
and in html
并在 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>
(...)
Why this behavior? Is there any chance that the selectis not "ready" at the moment of assigning its change()method? Additionally, changing .index()to .val()is returning the right value, so that's what confuses me even more.
为什么会有这种行为？是否有可能select在分配其change()方法时尚未“准备好” ？此外，换.index()到.val()的返回正确的值，所以这是混淆了我，甚至更多。
回答by Guffa
The first methods seem to work in the browsers that I tested, but the option tags doesn't really correspond to actual elements in all browsers, so the result may vary.
第一种方法似乎在我测试的浏览器中有效，但选项标签并不真正对应所有浏览器中的实际元素，因此结果可能会有所不同。
Just use the selectedIndexproperty of the DOM element:
只需使用selectedIndexDOM 元素的属性：
alert($("#dropDownMenuKategorie")[0].selectedIndex);
Update:
更新：
Since version 1.6 jQuery has the propmethod that can be used to read properties:
从 1.6 版 jQuery 开始，就有了prop可以用来读取属性的方法：
alert($("#dropDownMenuKategorie").prop('selectedIndex'));
回答by user167517
Good way to solve this in Jquery manner
以 Jquery 方式解决这个问题的好方法
$("#dropDownMenuKategorie option:selected").index()
回答by luckychii
I have a slightly different solution based on the answer by user167517. In my function I'm using a variable for the id of the select box I'm targeting.
根据 user167517 的回答，我有一个略有不同的解决方案。在我的函数中，我使用一个变量作为目标选择框的 id。
var vOptionSelect = "#productcodeSelect1";
The index is returned with:
索引返回：
$(vOptionSelect).find(":selected").index();
回答by Nick Bedford
You can use the .prop(propertyName)function to get a property from the first element in the jQuery object.
您可以使用该.prop(propertyName)函数从 jQuery 对象中的第一个元素获取属性。
var savedIndex = $(selectElement).prop('selectedIndex');
This keeps your code within the jQuery realm and also avoids the other option of using a selector to find the selected option. You can then restore it using the overload:
这使您的代码保持在 jQuery 领域内，并且还避免了使用选择器来查找所选选项的其他选项。然后您可以使用重载来恢复它：
$(selectElement).prop('selectedIndex', savedIndex);
回答by Rishi Kulshreshtha
selectedIndexis a JavaScript Select Property. For jQuery you can use this code:
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());
});
});
回答by rajesh kakawat
try this
尝试这个
alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
回答by Niharika Birari
You can get the index of the select box by using : .prop() method of JQuery
您可以使用：JQuery 的 .prop() 方法获取选择框的索引
Check This :
检查这个：
<!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>
