使用 jQuery 获取所选选项的索引
Posted
技术标签:
【中文标题】使用 jQuery 获取所选选项的索引【英文标题】：Get index of selected option with 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 答案都可以。
【参考方案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 );
);
);
【讨论】：
以上是关于使用 jQuery 获取所选选项的索引的主要内容，如果未能解决你的问题，请参考以下文章
select2 jQuery插件：获取所选选项的文本值？ [复制]