Question

Currently, I have two drop down lists that are populated with users’ first and last names. When a user is selected from the first drop down list, the name is unavailable in the second drop down list.

I would like to add a third drop down list that makes the values selected in the first and second lists unavailable. How may I modify my current code to support this feature?

The current code may be found here: 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);

}

Thanks in advance.

Answer 1

To do this with jQuery (see http://jsfiddle.net/NfTNA/38/)

Example markup

<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;
});

This is based on the following:

• select an option from select list 1, removes option from select lists 2 and 3

• select an option from select list 2, removes option from select lists 1 and 3

• previously selected options are added back into lists