Supprimer les valeurs des listes déroulantes

Question

Actuellement, j'ai deux listes déroulantes qui sont remplies avec le prénom et le nom des utilisateurs. Lorsqu'un utilisateur est sélectionné dans la première liste déroulante, le nom n'est pas disponible dans la deuxième liste déroulante.

Je voudrais ajouter une troisième liste déroulante qui rend les valeurs sélectionnées dans les première et deuxième listes indisponibles. Comment puis-je modifier mon code actuel pour prendre en charge cette fonctionnalité?

Le code actuel se trouvent ici: http://jsfiddle.net/NfTNA/

function removeOptions(selectA,selectB,selectC) { 
    var firstValue = $(selectA).children(":selected").attr("value"); 
    var secondValue = $(selectB).children(":selected").attr("value"); 
    var thirdValue = $(selectC).children(":selected").attr("value"); 
    // get the other element from the hidden select to put back 
    var prior = $("#hiddenContainer").children("[value!="+secondValue+"]").data("prior"); 
    if (prior != undefined) { 
     $("#hiddenContainer").children("[value!=" + secondValue + "]").insertAfter($(selectB).children("[value=" + prior.prior + "]")); 
    } 
    if (firstValue != 0) { 
     // add the prior id data to the element before removing it 
     var priorValue = $(selectB).children("[value="+firstValue+"]").prev().attr("value"); 
     $(selectB).children("[value="+firstValue+"]").data("prior",{prior:priorValue}); 

     // move the selected element of selectA in selectB to hidden select 
     $(selectB).children("[value="+firstValue+"]").appendTo("#hiddenContainer"); 
    } 
    // reselect the option in the secondary select 
    $(selectB).val(secondValue); 

} 

Merci à l'avance.

Answer 1

Pour ce faire avec jQuery (voir http://jsfiddle.net/NfTNA/38/)

Exemple balisage

<label for="reviewer">Select 1<sup>st</sup> Reviewer:</label> 
<br /> 
<select name="optionsA" id="optionsA"> 
    <option value="">&ndash; select &ndash;</option> 
    <option value="jsmith">Smith, John (jsmith)</option> 
    <option value="bwright">Wright, Bob (bwright)</option> 
</select> 
<br /> 
<label for="reviewer">Select 2<sup>nd</sup> Reviewer:</label> 
<br/> 
<select name="optionsB" id="optionsB"> 
    <option value="">&ndash; select &ndash;</option> 
    <option value="jsmith">Smith, John (jsmith)</option> 
    <option value="bwright">Wright, Bob (bwright)</option> 
</select> 
<br /> 
<label for="reviewer">Select 3<sup>rd</sup> Reviewer:</label> 
<br/> 
<select name="optionsC" id="optionsC"> 
    <option value="">&ndash; select &ndash;</option> 
    <option value="jsmith">Smith, John (jsmith)</option> 
    <option value="bwright">Wright, Bob (bwright)</option> 
</select> 

jQuery

var firstSelected = null; 
var secondSelected = null; 

//initally order select lists (this is a bit of cheat, to help later on 

$('#optionsA').change(function() { 
    //remove the currently selected option from 2nd/3rd drop down 
    var selectedValue = $('#optionsA option:selected') 
    if (selectedValue.val() != "") { 
     $('#optionsB option[value="' + selectedValue.val() + '"]').remove(); 
     $('#optionsC option[value="' + selectedValue.val() + '"]').remove(); 
    } 
    else { 
     selectedValue = null; 
    } 

    //add previous item back in to 2nd/3rd drop down 
    if (firstSelected != null) { 
     $('#optionsB').append($('<option>', { value : firstSelected.val() }).text(firstSelected.text())); 
     $('#optionsC').append($('<option>', { value : firstSelected.val() }).text(firstSelected.text())); 
    } 

    //save the currently selected value 
    firstSelected = selectedValue; 
}); 

$('#optionsB').change(function() { 
    //remove the currently selected option from 1st/3rd drop down 
    var selectedValue = $('#optionsB option:selected') 
    if (selectedValue.val() != "") { 
     $('#optionsA option[value="' + selectedValue.val() + '"]').remove(); 
     $('#optionsC option[value="' + selectedValue.val() + '"]').remove(); 
    } 
    else { 
     selectedValue = null; 
    } 

    //add previous item back in to 1st/3rd drop down 
    if (secondSelected != null) { 
     $('#optionsA').append($('<option>', { value : secondSelected.val() }).text(secondSelected.text())); 
     $('#optionsC').append($('<option>', { value : firstSelected.val() }).text(firstSelected.text())); 
    } 

    //save the currently selected value 
    secondSelected = selectedValue; 
}); 

Ceci est basé sur les points suivants:

• select une option dans la liste de sélection 1, supprime l'option de listes de sélection 2 et 3

• sélectionner une option dans la liste de sélection 2, supprime l'option de listes de sélection 1 et 3

• options précédemment sélectionnées sont rajoutées dans des listes

Answer 2

Regardez ce violon http://jsfiddle.net/YHjuz/1/
Il vous donnera l'idée d'aller plus loin.
Et pour info, vous ne pouvez pas masquer l'option d'une liste déroulante dans IE7.

Answer 3

Cela pourrait être trop simplifier, mais je vois que vous semblez essayer de garder la valeur sélectionnée et la suppression de tous les autres lors de la modification du dernier menu déroulant, alors que diriez-vous faire ceci:

$(document).ready(function() { 
    $('#optionsC').change(function() { 
     $('#selectA').find('option:not(:selected)').remove(); 
     $('#selectB').find('option:not(:selected)').remove(); 
    }); 
}); 

Ou si vous êtes en essayant de supprimer le nom dans la troisième case de la boîte A et B:

$('#optionsC').change(function() { 
    var selectedValue = $(this).val(); 
    if (selectedValue != "") { 
     $('#optionsA option[value="' + selectedValue + '"]').remove(); 
     $('#optionsB option[value="' + selectedValue + '"]').remove(); 
    } 
});