jQuery <select> opcja wyłączona, jeśli wybrany w drugiej <select>

Question

staram się próbować wyłączyć opcję jeśli zostanie wybrany w żadnej wybiera

Tak na przykład, jeśli został wybrany name = „select1” opcja „Test 2” , chcę, aby "Test 2" został wyłączony w obu instrukcjach wyboru ... i jeśli coś innego zostanie sprawdzone, to ponownie włącza poprzednią opcję.

Napisałem tutaj przykładowy scenariusz, do którego, moim zdaniem, zbliżyłbym się do mnie "... ale to mnie tu daleko. Każda pomoc będzie doceniona.

<script type="text/javascript"> 
$(document).ready(function(){ 
$("select").change(function() { 
    $("select").find("option:selected").attr('disabled', true); 
}); 
}); 
</script> 

<select name="select1"> 
    <option>No Match</option> 
    <option value="1">Test</option> 
    <option value="2">Test 2</option> 
    <option value="3">Test 3</option> 
</select> 

<select name="select2"> 
    <option>No Match</option> 
    <option value="1">Test</option> 
    <option value="2">Test 2</option> 
    <option value="3">Test 3</option> 
</select> 

Answer 1

żywo demo:http://jsfiddle.net/dZqEu/

$('select').change(function() { 

    var value = $(this).val(); 

    $(this).siblings('select').children('option').each(function() { 
     if ($(this).val() === value) { 
      $(this).attr('disabled', true).siblings().removeAttr('disabled'); 
     } 
    }); 

}); 

---

Może wolisz tę wersję kodu:

$('select').change(function() { 

    $(this) 
     .siblings('select') 
     .children('option[value=' + this.value + ']') 
     .attr('disabled', true) 
     .siblings().removeAttr('disabled'); 

}); 

żywo Demo:http://jsfiddle.net/dZqEu/2/

Należy zauważyć, że ta druga wersja jest jednolinijkowa (jedna linia kodu), ale sformatowałem ją jako bardziej czytelną. Bardziej podoba mi się ta druga wersja.

---

Należy również zauważyć, że mój kod zakłada, że ​​te dwa pola SELECT są elementami rodzeństwa DOM. Jeśli to nie jest Twój przypadek, to ten kod - $(this).siblings('select') - nie będzie działał dla ciebie, a będziesz musiał użyć metod traversal jQuery, aby przeskoczyć do innego pola SELECT.

W najgorszym przypadku - gdy SELECT Skrzynki są daleko od siebie w drzewie DOM i postępowy nie byłoby efektywne - można po prostu przypisać ID przypisuje do nich i użyć tego kodu, aby wybrać inne pola:

$('#select1, #select2').not(this) 

żywo demo:http://jsfiddle.net/dZqEu/3/