jQuery Scelto: come selezionare 1 valore di opzione e rimuovere lo stesso in un altro menu di selezione?

Question

Ho messo 2 elementi uno accanto all'altro. Entrambi usano il plugin jQuery scelto.

Questo è il codice:

<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> 

Questo è il Javascript. libreria jQuery, l'ultimo plugin scelto e CSS sono tutti correttamente inclusi del corso.

<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> 

questo è quello che voglio realizzare con lo script di cui sopra.

• Ci sono due elementi di selezione con gli stessi valori. Quando il valore "1" è stato selezionato nell'elemento 1, ad esempio, voglio disabilitarlo nell'elemento 2.
• Tuttavia. dopo aver deselezionato il valore "1" nell'elemento 1, è ancora disabilitato nell'elemento 2. Non è quello che voglio. L'altro valore dovrebbe essere nuovamente disponibile dopo aver deselezionato il valore nel primo elemento.

Qualcuno sa come realizzare questo?

EDIT

Ora ho messo su un JSFiddle proprio qui: http://jsfiddle.net/dq97z/3/. Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

Qualcosa del genere dovrebbe farlo:

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

Poiché si modifica l'opzione selezionata nel primo menu a discesa, le opzioni precedenti disattivate non vengono nuovamente abilitate.

È necessario prima abilitare tutte le opzioni e quindi disabilitare solo l'opzione selezionata. Prova questo

$('.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

di impostare i disabili su ogni cambiamento, naturalmente non funzionerà ...

In questo codice a cambiare l'attributo disabled in base al valore precedente;

<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

Sto cercando di utilizzare questo codice senza la scelta multipla in modo da selezionare per ognuno una sola opzione può essere scelto. Voglio usare allow_single_deselect: true code per rimuovere un'opzione se scelto nella casella di selezione ma non riesco a farlo funzionare. Ho disabilitato l'opzione di ricerca perché non ne ho bisogno in questa pagina.

<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>