jQuery opción <select> desactivado si se selecciona en otra <select>

Question

Estoy tratando de intentar desactivar una opción si se selecciona en cualquiera de las selecciona

opción Así por ejemplo, si name = "select1" ha seleccionado "Prueba 2" , entonces quiero que la "Prueba 2" se deshabilite en ambas declaraciones seleccionadas ... y si se comprueba algo más, vuelve a habilitar la opción anterior.

He escrito una secuencia de comandos de muestra aquí que pensé que me haría "cerrar" ... pero me pone lejos de la base aquí. Cualquier ayuda sería apreciada.

<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

Demostración en directo: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'); 
     } 
    }); 

}); 

---

Es posible que prefiera esta versión del código:

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

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

}); 

en vivo de demostración:http://jsfiddle.net/dZqEu/2/

Tenga en cuenta que esta segunda versión es de una sola línea (una línea de código) pero la he formateado para que sea más legible. Me gusta esta segunda versión mejor.

---

Además, tenga en cuenta que mi código asume que esas dos cajas SELECT son elementos hermanos DOM. Si ese no es tu caso, entonces este código - $(this).siblings('select') - no funcionará para ti, y tendrás que usar los métodos de cruce de jQuery para saltar al otro cuadro SELECCIONAR.

En el peor de los casos - cuando las cajas de selección están muy separados en el árbol DOM, y de desplazamiento no sería eficiente - puede simplemente asignar atributos de identificación para ellos y utilizar este código para seleccionar el otro cuadro:

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

demostración en directo:http://jsfiddle.net/dZqEu/3/