선택한 옵션의 값 변경

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 더 다음 번있을 수 없다.

이 문제는, 스왑 기능 1을 가지고 그 선택 변경 내가 호출 할 때 변경 이벤트는 3를 포함하는 첫 번째 선택에 대해 말하기를 1로 변경 할 수 있다는 것입니다 내 스왑 기능

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로 선택되었지만 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