Dynamically populate 4 drop-down lists with the remaining options with JavaScript jQuery

Question

I have 4 drop-down lists, each one needs to show the same 5 options minus the options already selected in the previous drop-down list, and it needs to be able to show again if any is unselected later on. I would like to use only CSS JavaScript and/or jQuery if possible.

Thanks

Answer 1

You can do it all by using JQuery.

Here is a tutorial you can use http://www.overpie.com/jquery/articles/jquery-remove-dropdownlist-or-combobox-options

The thing is you populate all comboboxes and then on the select of one, rmeove this options from all others.

If removing the option is a problem you can always disable it.

Answer 2

Try this:

var dropDownIds = new Array();
var optionList = new Array();

dropDownIds.push(dropdownId1);
....
....
dropDownIds.push(dropdownId4);

optionList.push({'value':value1, 'name':option1});
....
....
optionList.push({'value':value5, 'name':option5});

/* Call this function on onchange event of the first dropdown i.e. dropDownId1 */
function fillDropDowns(dropDownIds,optionList)
{
    for (var j =1; j < dropDownIds.length; j++)
    {
        var selected_option = $("#"+dropDownIds[j-1]).val();
        $("#"+dropDownIds[j]).empty();
        for (var i=0, size=optionList.length; i<size; i++){
            if (selected_option != optionList[i].value)
            {
                var option = $('<option />');
                option.attr('value', optionList[i].value).text(optionList[i].name);
                $('#'+dropDownIds[j]).append(option);
             }
         }
    }
}