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

【问题标题】：Get index of selected option with jQuery使用 jQuery 获取所选选项的索引
【发布时间】：2012-11-13 11:06:47
【问题描述】：

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

为什么会有这种行为？在分配其change() 方法时，select 是否有可能没有“准备好”？此外，将.index() 更改为.val() 会返回正确的值，这让我更加困惑。

【问题讨论】：

这么老的问题，但真正的问题是当 select 上有id 时使用的[name=]。下面的[0].selectedIndex 和option:selected 答案都可以。

标签： jquery html select indexing

【解决方案1】：

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

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

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

更新：

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

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

【讨论】：

@Joan.bdm jquery 没有 selectedIndex 属性。添加[0] 会将jquery 对象转换为具有selectedIndex 属性的javascript 对象。如果没有[0]，此示例将无法运行
@JasonL.:selectedIndex是一个属性，没有对应的属性。 attr 方法可能适用于读取 1.6 之前版本中的属性，但不适用于该版本。
@Guffa 知道为什么selectedIndex 在第一个选项中不是从 0 开始吗？
@adamj：那你做错了什么。 selectedIndex 属性从零开始。我检查了文档，甚至亲自尝试过，以确保 100% 确定这一点。
@Guffa 非常感谢您的回复 Guffa！您的消息实际上引起了点击。我使用 Select2 并且在将其与数组结合时忘记考虑占位符。愚蠢的小错误。再次感谢:)

【解决方案2】：

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

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

【讨论】：

我喜欢这个答案不需要 OP 首选答案的 [0]，作为一个 python 开发人员，我真的很欣赏这个答案的可读性。
OP 已经尝试过了。该代码与问题中的第一种方法相同。

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

var vOptionSelect = "#productcodeSelect1";

索引返回：

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

【讨论】：

【解决方案5】：

试试这个

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

【讨论】：

所有警报是怎么回事？
@Beanwah - 这是测试任何东西的最佳方式！ ;)
@JoePC 不，不是。 console.log() 会做得更好
@reiner.luke - ;) = 搞笑

【解决方案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());
  });
});

【讨论】：

【解决方案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>

【讨论】：

【解决方案8】：

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

【讨论】：