CODEWITHSUNDEEP
javascriptjquery
RatheeshKumar Malamal
RatheeshKumar Malamal

Reputation: 1

JQuery option remove on select from multiple select box

I am new to JQuery. I have searched for a solution but couldn't find any solution. I have 3 select box and the option selected in the first select box needs to removed from the next two select box. I have the code which actually hides the selected option in FF and chrome. But in IE it is not getting hidden. Also i need to bring back the selected option, if the user changes his mind and re-select the option he has already selected in first select box. Can someone help me out. Any help is much appreciated.

var array= [];
$(document).ready(function(){
    $('select').on('change', function(event ) {
        $('select').not(this).find('option').show();
        var value = $(this).val();
        //alert(value);
        array.push(value);
        for (var i = 0; i < array.length; i++) {
            // Here i am disabling the option as well as hiding. Because in IE hide does not work.
            $('select').not(this).find('option[value="'+array[i]+'"]').attr('disabled','disabled').hide();
        }
    });
});

Upvotes: 0

Views: 826

Answers (1)

Anunay
Anunay

Reputation: 507

Try this, 

$("#first_select").change(function(){
    $("#second_select option,#third_select option").removeAttr("disabled");
    $.each($("#first_select").val(), function( index, value ) {
       $("#second_select option[value="+value+"]").attr("disabled","disabled");
       $("#third_select option[value="+value+"]").attr("disabled","disabled");
    });      
});

http://jsfiddle.net/anunaydahal/h8n1agdp/11/

Upvotes: 2

Related Questions