Question

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

＆＃13;

$(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/>');
    
    });
    
  });
  
});

＆＃13;

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

＆＃13;

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/>');

  });

});

检查小提琴：Fiddle

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>

如何使用jquery从多个select中获取正确的值？

2 个答案: