更改所選選項的值

Question

我在某個類中有一些選擇，當更改事件發生在任何這些選擇時，我想執行以下操作：搜索發生更改事件的所選值的所有選擇，當發現我想交換這兩個值。

不適舉一個例子：

<div id="l1col1" class="selects1"> 
    <select onChange='swap(newVal, oldVal);'> 
     <option selected>3</option> 
     <option>2</option> 
     <option>1</option> 
    </select> 
</div> 

<div id="l1col2" class="selects1"> 
    <select onChange='swap(newVal, oldVal);'> 
     <option selected>2</option> 
     <option>3</option> 
     <option>1</option> 
    </select> 
</div> 

<div id="l1col3" class="selects1"> 
    <select onChange='swap(newVal, oldVal);'> 
     <option selected>1</option> 
     <option>2</option> 
     <option>3</option>   
    </select> 
</div> 

我的選擇中沒有一個可以具有其他的相同的值：永遠不會有1或2或3 更多然後一次。

這是我的交換功能

function swap (x,y){  
    //alert($(x).find(":selected").text()); 
    var tt = $(x).find(":selected").text();   
    alert(tt + y); 
    $('.selects2 :selected:contains("' + tt + '")').text("' + y + '"); 
} 

的問題是，當我打電話更改事件可以說在其中包含3的第一選擇，並與1改變它，交換功能改變了有1個選擇作爲選擇3，但也改變選擇，我又變成了3。

你能幫我解決這個問題嗎？ 我希望我足夠清楚

Answer 1

首先，使用jQuery來附加事件而不是醜陋的內聯處理程序。其次，您可以使用data屬性來存儲要比較的舊值。試試這個：

$('.selects1 select') 
    .each(function() { 
     var $this = $(this); 
     $this.data('old-value', $this.val()); 
    }) 
    .change(function() { 
     var $this = $(this); 
     var newValue = $this.val(); 
     var oldValue = $this.data('old-value'); 
     $('.selects1 select').not(this).filter(function() { 
      return $(this).val() == newValue; 
     }).val(oldValue).data('old-value', oldValue); 
     $this.data('old-value', newValue); 
    }); 

Example fiddle