Remove value from dropdown when value selected in other drop down

Question

I have three dropdowns with the same option value I want to remove selected option value from 2nd and 3rd dropdown when the value is selected in first dropdown.

But problems comes when I change the new option value in first dropdown then previous selected value also remove from second and third dropdown

I want that when option value selected in first dropdown then should shows all value in second and third drop down expect selected value.

please help me

jquery code

$('#select_period').bind('change',function(){
    var select_box=$("#select_period").val();
    if(select_box =='select'){

    } else {
        if($(this).val() == select_box )$('#period_field option[value="'+select_box+'"]').remove();
        if($(this).val() == select_box )$('#fav_period option[value="'+select_box+'"]').remove();
    }
});

Welcome to StackOverflow: if you post code, XML or data samples, please highlight those lines in the text editor and click on the "code samples" button ( { } ) on the editor toolbar to nicely format and syntax highlight it! — marc_s

Gareth Parker Gareth Parker · Accepted Answer · 2012-08-14T05:59:28

$(".commonClassForThreeSelects").change(function()
{
    var firstSelect = $(this);

    var value = $(this).find(':selected').value();
    $(".commonClassForThreeSelects").each(function()
    {
        if(firstSelect = $(this))
            return;

        $(this).find('option').show();
        $(this).find('option[value=' + value +']').hide();
    });
});

How does that work for you? It isn't restricted to just the first select, if a value is selected from any of the dropdowns, the others will hide options of that value

Remove value from dropdown when value selected in other drop down

2 Answers