jQuery Elegido: cómo seleccionar 1 valor de opción y eliminar el mismo en otro menú de selección?

Question

He puesto 2 elementos al lado uno de otro. Ambos están usando el plugin jQuery Chosen.

Este es el código:

<div class="wrapper"> 
    <select data-placeholder="Number row 1" style="width:350px;" multiple class="chzn-select"> 
    <option value=""></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    </select> 

    <select data-placeholder="Number row 2" style="width:350px;" multiple class="chzn-select"> 
    <option value=""></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    </select> 
</div> 

Este es el Javascript. La biblioteca jQuery, el último plugin de Chosen y CSS, están todos incluidos correctamente por supuesto.

<script> 
$('.chzn-select').trigger("liszt:updated"); 
$('.chzn-select').chosen().change(function() { 
    var selectedValue = $(this).find('option:selected').val(); 
    $(this).parent().find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled'); 
}); 
</script> 

Esto es lo que quiero lograr con el script anterior.

• Hay dos elementos seleccionados con los mismos valores. Cuando se ha seleccionado el valor "1" en el elemento 1, por ejemplo, quiero desactivarlo en el elemento 2.
• Sin embargo. después de deseleccionar el valor "1" en el elemento 1, es todavía deshabilitado en el elemento 2. Eso no es lo que quiero. El otro valor debería estar disponible de nuevo después de anular la selección del valor en el primer elemento.

¿Alguien sabe cómo lograr esto?

EDITAR

ahora he puesto una jsFiddle derecho aquí: http://jsfiddle.net/dq97z/3/. ¡Cualquier ayuda sería muy apreciada!

Answer 1

Algo así debe hacerlo:

http://jsfiddle.net/musicisair/dq97z/10/

// cache selects for use later 
var selects = $('.chzn-select'); 

// whenever the selection changes, either disable or enable the 
// option in the other selects 
selects.chosen().change(function() { 
    var selected = []; 

    // add all selected options to the array in the first loop 
    selects.find("option").each(function() { 
     if (this.selected) { 
      selected[this.value] = this; 
     } 
    }) 

    // then either disabled or enable them in the second loop: 
    .each(function() { 

     // if the current option is already selected in another select disable it. 
     // otherwise, enable it. 
     this.disabled = selected[this.value] && selected[this.value] !== this; 
    }); 

    // trigger the change in the "chosen" selects 
    selects.trigger("liszt:updated"); 
}); 

Answer 2

Dado que está modificando la opción que está seleccionada en el primer menú desplegable, las opciones anteriores que fueron deshabilitadas no están habilitadas nuevamente.

Primero debe habilitar todas las opciones y luego desactivar solo la opción seleccionada. Prueba este

$('.chzn-select').trigger("liszt:updated"); 
$('.chzn-select').chosen().change(function() { 
    var selectedValue = $(this).find('option:selected').val(); 
    var $options = $(this).parent().find('option').attr('disabled', false); 
    $options.filter('option[value="'+ selectedValue +'"]:not(:selected)') 
    .attr('disabled', true); 
}); 

Answer 3

configura las personas con discapacidad en cada cambio, por supuesto no va a funcionar ...

En este código se cambia el atributo disabled en base al valor anterior;

<script> 
$('.chzn-select').trigger("liszt:updated"); 
$('.chzn-select').chosen().change(function() { 
    var selectedValue = $(this).find('option:selected').val(); 
    $(this).parent().find('option[value="'+ selectedValue +'"]:not(:selected)') 
     .prop("disabled", function(i, val) { 
       return !val; 
      }); 
}); 
</script> 

Answer 4

Estoy tratando de utilizar este código sin la opción múltiple por lo que para cada uno seleccione sólo una opción puede ser elegido. Quiero usar el código allow_single_deselect: true para eliminar una opción si se selecciona en el cuadro de selección, pero no puedo hacerlo funcionar. Inhabilité la opción de búsqueda porque no la necesito en esta página.

<script>//<![CDATA[ 
$(function(){ 
$('.chzn-select').chosen({disable_search_threshold: 10}) .change(
function() { 
var selectedValue = $(this).find('option:selected').val(); 
$(this).parent().parent().find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled'); 
$('.chzn-select').trigger("liszt:updated"); 
}); 

});//]]></script>