如何在更改事件（選擇框）上獲取所選項目的索引？

Question

我的頁面上有4個下拉列表。我想知道使用索引選擇或更改了哪個下拉列表，但是每次我獲得0 index。這是我的代碼

https://jsbin.com/fapahosenu/1/edit?html,js，輸出

$(function(){
  function dropdownChangeHandler(){
    console.log($(this).index())
  }
  $('[data-dropdown="dropdowns_js"]').on('change',dropdownChangeHandler);
})

這不是我想要的..我想要如果我更改第一個下拉列表，它將為我提供0 。 我更改第二個下拉菜單給我1我更改第三個下拉菜單給我2

Answer 1

問題是因為您從select獲取了index() ，但它們不是兄弟姐妹，因此它們都返回0 。

要解決此問題，請將選擇器傳遞給index() ，這是您希望在其中找到索引的一組元素，如下所示：

 $('[data-dropdown="dropdowns_js"]').on('change', function() { var index = $(this).index('[data-dropdown="dropdowns_js"]'); console.log(index); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <span> <select class="dropdowns_js" data-dropdown="dropdowns_js" data-key="bank"> <option selected="true" disabled="true" value="0">Select Bank</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </span> <span> <select class="dropdowns_js" data-dropdown="dropdowns_js" data-key="state"> <option selected="true" disabled="true" value="0">Select State</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </span> <span> <select class="dropdowns_js" data-dropdown="dropdowns_js" data-key="district"> <option selected="true" disabled="true" value="0">Select District</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </span> 

Answer 2

像這樣添加事件onclick並通過function dropdownChangeHandler(1)傳遞值

Answer 3

嘗試以下功能，它將為您提供選定的下拉索引。 如果您的問題通過我的解決方案解決，請標記為答案

function dropdownChangeHandler(){
  $('.dropdowns_js').each(function(a,b){       
    if($(this).is(":focus"))
    {
      console.log(a);
    }
  }); 
}

如果選擇狀態下拉菜單，它將為您提供1作為所選索引