javascript - 如何使用jquery从多重选择中获取正确的值？

Question

一个页面中有多个select html标签，我想当用户单击下拉列表时获得两个值。但是，我的脚本有一点问题。似乎有一个循环错误，我不知道如何找出它。

FIDDLER

$(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

您需要使用调用事件的 this 元素，并使用 .off() 取消绑定(bind)先前的事件处理程序。

$(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>