jquery - 禁用基于其他的选项选项

Question

如果在其他选择中选择了确切的选项，如何在选择中禁用多个选项。我在此链接上找到了与我类似的问题的已回答问题：http: //jsfiddle.net/dZqEu/

接下来是 jQuery 代码：

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

问题是这仅适用于 2 个选择。我需要总共 3 个选择，这应该禁用选择中相同值的可能性。

此代码不适用于 3 次选择：http: //jsfiddle.net/dZqEu/968/

提前 Tnx

笔记：

当 select1 设置为 1 时，select 2 设置为 2，我无法在 select3 中禁用值 1&2。它只禁用选择 3 中的值 2 ...

Answer 1

试试这个：- http://jsfiddle.net/Z2yaG/

使用焦点获取上一个值并删除禁用的值。在您的 html 中，我为默认选项添加了值 -1。

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

Answer 2

这似乎工作：http: //jsfiddle.net/QLn9b/1/

它正在使用您的原始代码：

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

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

Answer 4

这是一种方式。当任何下拉列表更改时，计算所有选定的值（第一个除外）。如果其他框的选定值出现在值列表中，请禁用相应的选项。

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

演示

Answer 5

尝试这个。

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