CODEWITHSUNDEEP
jquery
Ivan Pandžić
Ivan Pandžić

Reputation: 373

Disabling <select> option based on other <select> option

How to disable multiple options in select, in case that exact options are selected in other selects. I found answered question for problem similar to mine on this link: http://jsfiddle.net/dZqEu/

jQuery code looks next:

$(this).siblings('select').children('option').each(function() {
    if ( $(this).val() === value ) {
        $(this).attr('disabled', true).siblings().removeAttr('disabled');   
    }

The problem is that this works only for 2 selects. I need total 3 selects which should disable possibility that same values in selects are selected.

This code won't work for 3 selects: http://jsfiddle.net/dZqEu/968/

Tnx in advance

NOTE:

When the select1 is set to 1, select 2 is set to 2, i can't disable values 1&2 in select3. It only disables value 2 in select 3...

Upvotes: 4

Views: 3456

Answers (5)

PSL
PSL

Reputation: 123749

try this:- http://jsfiddle.net/Z2yaG/

Using focus to get the prev value and remove disabled ones. In your html i have added value -1 for default option. 

<option value="-1">No Match</option>

     var prev = -1;
$("select").change(function () {
    if ($(this).val() > -1) {
        $("select").not(this).find("option[value=" + $(this).val() + "]").attr('disabled', 'disabled');
    }
    $("select").not(this).find("option[value=" + previous + "]").removeAttr('disabled');
}).focus(function () {
    previous = $(this).val();
});

Upvotes: 7

Ja͢ck
Ja͢ck

Reputation: 173662

This is one way. When any dropdown changes, calculate all selected values (except the first one). If the selected value of the other boxes occurs in the list of values, disable the respective option.

$('select').change(function() {
    var values = [],
    others = $(this).siblings('select'),
    all = others.andSelf();

    all.each(function() {
        if (this.selectedIndex > 0) {
            values.push(this.options[this.selectedIndex].value);
        }
    });

    others.each(function() {
        for (var i = 0; i < this.options.length; ++i) {
            this.options[i].disabled = $.inArray(this.options[i].value, values) !== -1;
        }
    });
});

Demo

Upvotes: 1

Prem
Prem

Reputation: 5974

I think this is what you are looking for.

$('select').change(function() {

  var select_elements = $('select')
  $.each(select_elements, function(i,elem){
    var sel_values = [];

    // Selecting and Iterating on Sibling Selects        
    var siblis = $(elem).siblings('select')
    $.each(siblis, function(i, sibli){
        if($(sibli).val()!='No Match'){
            sel_values.push($(sibli).val());
        }
    });

    // Iterating on Options of Select
    $(this).children('option').each(function() {
        $(this).removeAttr('disabled');

        if($.inArray($(this).val(), sel_values) !== -1){
            $(this).attr('disabled', true);
        }
    });        

  });    
});

If All selects has the values from 1 to 6,

If select1 value      --> 1,
and select2 value     --> 3 (1 is disabled)
then in select3 value --> 5 (1,3 are disabled)

After selecting select3,

In select1  --> 1 (3,5 disabled)
In select2  --> 3 (1,5 disabled)
In select3  --> 5 (1,3 disabled)

Here is the jsfiddle: http://jsfiddle.net/prem_nagalla1/rY4n3/

Hope it helps :)

Upvotes: 1

Parthik Gosar
Parthik Gosar

Reputation: 11646

Try this.

$('select').change(function() 
{    
    var value = $(this).val();
    $('option').removeAttr("disabled");
    $('select').each(function ()
    {
        $("option[value=" + $(this).val() + "]").attr("disabled","disabled");
    });
});

Upvotes: 0

tymeJV
tymeJV

Reputation: 104805

This seems to work: http://jsfiddle.net/QLn9b/1/

It is using your original code:

$("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
});

Upvotes: 2

Related Questions