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...

回答1:

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();
});

回答2:

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);
});

回答3:

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 :)

回答4:

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

回答5:

Try this.

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

来源：https://stackoverflow.com/questions/16220296/disabling-select-option-based-on-other-select-option