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

小开

最佳答案

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

只需使用DOM元素的selectedIndex属性:

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

更新:

从1.6版开始，jQuery有了prop方法，可以用来读取属性:

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

小开

试试这个

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

小开

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

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

小开

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

var vOptionSelect = "#productcodeSelect1";

返回的索引为:

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

小开

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());
});
});

小开

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

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

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

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

小开

你可以使用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。所以

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>

JS:

$(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 );
});
});

小开

实际上，我只是重申一下之前的说法:

$("#dropDownMenuKategorie").change(function() {
var Selection = $("#dropDownMenuKategorie option:selected");
alert(Selection.index());
alert(Selection.val());
});