如何從jquery中選擇多個正確的值？

Question

在一個頁面中有多個選擇的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()取消綁定先前的事件處理程序。

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

Answer 2

你不想加改變，然後點擊像上面的代碼。您只需觸發更改事件。

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