jQuery opzione <select> disabilitata se selezionato in altri <select>

Question

che sto cercando di provare a disabilitare l'opzione, se è selezionata in uno dei seleziona

opzione Così, per esempio, se ha selezionato name = "Select1" "di prova 2" , quindi voglio che "Test 2" sia disabilitato in entrambe le istruzioni select ... e se qualcos'altro viene controllato che riattiva l'opzione precedente.

Ho scritto qui uno script di esempio a cui ho pensato di farmi 'chiudere' ... ma mi ha messo molto lontano da qui. Qualsiasi aiuto sarebbe apprezzato.

<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

Demo online: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'); 
     } 
    }); 

}); 

---

Si può preferire questa versione del codice:

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

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

}); 

Demo online:http://jsfiddle.net/dZqEu/2/

Si noti che questa seconda versione è un one-liner (una riga di codice) ma l'ho formattata per essere più leggibile. Mi piace di più questa seconda versione.

---

Inoltre, si noti che il mio codice presuppone che quelle due caselle SELECT siano elementi fratello di DOM. Se questo non è il tuo caso, allora questo codice - $(this).siblings('select') - non funzionerà per te, e dovrai usare i metodi di attraversamento di jQuery per passare all'altra casella SELECT.

Nel peggiore dei casi - quando le scatole SELEZIONA sono molto distanti nell'albero DOM, e traslazione non sarebbe efficiente - si può solo assegnare ID attribuisce loro e utilizzando questo codice per selezionare l'altra scatola:

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

demo dal vivo:http://jsfiddle.net/dZqEu/3/

Answer 2

Prova questo:

$(document).ready(function(){ 
    $("select").change(function() { 
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true); 
    }); 
}); 

Nel caso in cui si desidera attivare l'opzione precedentemente disabilitato (quando il valore non è selezionata da un altro combo), utilizzare questa versione enchanced:

$(document).ready(function() { 
    $("select").change(function() { 
     var $this = $(this); 
     var prevVal = $this.data("prev"); 
     var otherSelects = $("select").not(this); 
     otherSelects.find("option[value=" + $(this).val() + "]").attr('disabled', true); 
     if (prevVal) { 
      otherSelects.find("option[value=" + prevVal + "]").attr('disabled', false); 
     } 

     $this.data("prev", $this.val()); 
    }); 
}); 

Answer 3

Il problema con il tuo codice è che all'interno della routine change(), stai guardando tutti i selettivi, piuttosto che quello che è cambiato e disabilitando tutte le voci selezionate. È necessario trovare il valore della voce selezionata in questione e disabilitarlo in altro, non quello corrente.

Qualcosa di simile può essere utile [testati]:

$(document).ready(function() { 
    $("select").each(function(cSelect) { 
    $(this).data('stored-value', $(this).val()); 
    }); 

    $("select").change(function() { 
    var cSelected = $(this).val(); 
    var cPrevious = $(this).data('stored-value'); 
    $(this).data('stored-value', cSelected); 

    var otherSelects = $("select").not(this); 

    otherSelects.find('option[value=' + cPrevious + ']').removeAttr('disabled'); 
    otherSelects.find('option[value=' + cSelected + ']').attr('disabled', 'disabled'); 
    }); 
}); 

Il bit stored-value è in modo da sapere quali opzioni per abilitare in altri <select> campi.

Answer 4

Se si dispone di più di 2 selezionare:

$('select').on('change', function() { 
    $('select option').removeAttr('disabled'); 
    $('select').each(function(i, elt) { 
     $('select').not(this).find('option[value="'+$(elt).val()+'"]').attr('disabled', true); 
    }); 
});