在前端开发中，经常需要获取下拉列表（select）选中的索引。本文将提供两种方法来实现这一目标。
方法一：使用 selectedIndex 属性
selectedIndex 是下拉列表的一个属性，它表示当前选中项的索引。我们可以通过 JavaScript 获取该属性值来获得选中项的索引。
<select id="mySelect"> <option value="0">第一项</option> <option value="1">第二项</option> <option value="2">第三项</option> </select>
const selectElement = document.getElementById("mySelect");
const selectedIndex = selectElement.selectedIndex;
console.log(selectedIndex); // 输出选中项的索引以上代码会输出选中项的索引，如果未选择任何项，则输出 -1。
方法二：使用 value 属性与 options 集合
除了 selectedIndex 属性外，我们还可以使用 value 属性与 options 集合来获取选中项的索引。
<select id="mySelect"> <option value="0">第一项</option> <option value="1">第二项</option> <option value="2">第三项</option> </select>
-- -------------------- ---- -------
----- ------------- - ------------------------------------
----- ------------- - --------------------
----- ------- - ----------------------
--- ------------- - ---
--- ---- - - -- - - --------------- ---- -
-- ----------------- --- -------------- -
------------- - --
------
-
-
--------------------------- -- --------以上代码会输出选中项的索引，如果未选择任何项，则输出 -1。
总结
本文介绍了获取下拉列表选中的索引的两种方法：使用 selectedIndex 属性和使用 value 属性与 options 集合。使用哪种方法取决于你的具体需求。如果你只需要获取选中项的索引，那么使用 selectedIndex 属性是更简洁的选择。如果你需要进一步操作选中项的值，那么使用 value 属性与 options 集合可能更为方便。
希望本文能够帮助你解决在前端开发中获取下拉列表选中索引的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26771