如何在下拉框change事件中获取选中项索引及多下拉框正确索引

我来帮你搞定这两个和下拉框索引相关的问题：

1. 获取下拉框选中项的索引 #

如果是想拿到当前选中的<option>在下拉框里的位置索引，有两种简单靠谱的方式：

• 原生JS方案（最高效）：直接用DOM元素自带的selectedIndex属性，在事件回调里this就是触发事件的<select>元素，直接写就行：

  console.log(this.selectedIndex);
  

• jQuery方案：通过查找选中的option来获取它的索引：

  console.log($(this).find('option:selected').index());
  

2. 解决多个下拉框索引总是返回0的问题 #

你代码里$(this).index()一直返回0，核心原因是：不带参数的index()方法，只会返回当前元素在它的直接同辈元素里的位置。举个例子，如果你的每个下拉框都被单独放在一个<div>或者<label>里，那每个下拉框都是其父元素的第一个子元素，所以索引自然是0。

要拿到它在所有目标下拉框里的全局索引，你只需要给index()传一个选择器，指定参照的元素集合——也就是你绑定事件的所有下拉框：

修改你的代码如下：

$(function(){
  function dropdownChangeHandler(){
    // 传入选择器，获取当前元素在所有匹配该选择器的元素中的索引
    console.log($(this).index('[data-dropdown="dropdowns_js"]'));
  }
  $('[data-dropdown="dropdowns_js"]').on('change',dropdownChangeHandler);
})

这样修改后，修改第一个下拉框会返回0，第二个返回1，第三个返回2，完全符合你的预期。

内容的提问来源于stack exchange，提问作者naveen