Skip to content Skip to sidebar Skip to footer

How To Prevent Duplicate Values In Multiple Dropdowns Using Jquery

I have 5 dropdowns menu for users to select their preferences. All the dropdowns have the same choices. If the user has chosen a value for dropdown 1, that option should not be ava

Solution 1:

Instead of changing the status of the option right away, first you need to get current values in the select fields, so that you can disable them in other select fields demo

 $(".go").change(function(){
    var selVal=[];
    $(".go").each(function(){
        selVal.push(this.value);
    });

    $(this).siblings(".go").find("option").removeAttr("disabled").filter(function(){
       var a=$(this).parent("select").val();
       return (($.inArray(this.value, selVal) > -1) && (this.value!=a))
    }).attr("disabled","disabled");
});

$(".go").eq(0).trigger('change');

the above code can be used with any number of select boxes :)

Post a Comment for "How To Prevent Duplicate Values In Multiple Dropdowns Using Jquery"