如何從多個選擇與jQuery中獲取正確的值？

Question

一頁中有多個select html標簽，當用戶單擊下拉列表時，我想得到兩個值。 但是，我的腳本有點問題。 似乎有一個循環錯誤，我不知道如何找到它。

提琴手

 $(document).ready(function(){ $('.SizeSelect').on('click',function(){ var sel = $("#SizeSelect_"+$(this).attr('id').replace('SizeSelect_','')); sel.data("preValue",sel.val()); sel.change(function(){ var th = $(this); th.data("newValue",th.val()); //output $('#log').append('pre:'+th.data("preValue")+' / select:'+th.data("newValue")+'<br/>'); }); }); }); 

 <select id="SizeSelect_14" class="SizeSelect" name="SizeSelectName"> <option value="5">N/A3</option> <option value="101">N/A2</option> <option value="105">N/A1</option> </select> <select id="SizeSelect_15" class="SizeSelect" name="SizeSelectName"> <option value="6">2N/A3</option> <option value="102">2N/A2</option> <option value="106">2N/A1</option> </select> <div id="log"></div> 

Answer 1

您不想添加更改，然后單擊上面的代碼即可。 您只需要觸發更改事件。

$(document).ready(function(){
  $('.SizeSelect').on('change',function(){

    var sel = $("#SizeSelect_"+$(this).attr('id').replace('SizeSelect_',''));

    sel.data("preValue",sel.val());


      var th = $(this);
      th.data("newValue",th.val());

      //output
      $('#log').append('pre:'+th.data("preValue")+' / select:'+th.data("newValue")+'<br/>');

  });

});

檢查小提琴： 小提琴

Answer 2

您需要使用this元素來調用事件，並使用.off()取消綁定先前的事件處理程序。

 $(document).ready(function() { $('.SizeSelect').on('click', function() { var sel = $(this); sel.data("preValue", sel.val()); sel.off('change').on('change', function() { var th = $(this); th.data("newValue", th.val()); //output $('#log').append('pre:' + th.data("preValue") + ' / select:' + th.data("newValue") + '<br/>'); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="SizeSelect_14" class="SizeSelect" name="SizeSelectName"> <option value="5">N/A3</option> <option value="101">N/A2</option> <option value="105">N/A1</option> </select> <select id="SizeSelect_15" class="SizeSelect" name="SizeSelectName"> <option value="6">2N/A3</option> <option value="102">2N/A2</option> <option value="106">2N/A1</option> </select> <div id="log"></div>