Question

希望的结果：

4个下拉选择框，每个选择框都有相同的选择。
选择一个选项后，它将在其他3个选择下拉列表中禁用。
此外，当更改选项时，它将在其他3个选择下拉列表中可用。
同样的模式必须适用于所有4种选择。

HTML：

<td class="formLabelHolder"><label for="field1174">Label</label></td>
<td class="formFieldHolder"><span><select name="field1" class="formSelect" id="field1">
<option selected="selected"></option>
<option>Large Format Solutions</option>
<option>Advanced Large Format Solutions</option>
<option>Scanning Solutions</option>
<option>Advanced Scanning Solutions</option>
<option>Office Imaging</option>
<option>Projectors Solutions</option>
</select>
</span></td>

我正在尝试使用jQuery来解决这个问题，这里是代码：

$(document).ready(function(){
    var select = $('#form-221 select :selected');


$('#form-221 select').change(function() {

        var value = $(this).val();
    var index = $('#form-221 select').index(this);


        $('#form-221 select option').each(function() {

    //  $(this).removeAttr('disabled');

            if ( $(this).val() == value ) {
                    $(this).attr('disabled', true);
            }
        if ( $(this).val() == select[index] ) {
                    $(this).attr('disabled', false);
            }
            });

//  console.log($(':selected', select.parent('select')[index]).val());  

    select = $('#form-221 select :selected');

    });
});

我也试过这个：

 $(document).ready(function(){



$('#form-221 select').change(function() {

        var value = $(this).val();



        $('#form-221 select option').each(function() {

        $(this).removeAttr('disabled');

            if ( $(this).val() == value ) {
                    $(this).attr('disabled', true);
            }

            });
    });
});

但它只会导致最后一次更改选择。

上面的代码可以工作（如果你拿走第一个“if”）中途，它会禁用选择，但是当更改选择时它不会启用它。

我必须做错事，我正在努力解决这个问题;如果我确实找到答案，我会在这里粘贴它：）

如果有人有其他方法可以解决这个问题，请告诉我！我渴望找到答案/解决方案：）

我发现了另外一个类似这样的问题，但它只适用于2个选项，我试过;）

Answer 1

一种解决方案是在每次更改时保存数组中的所有选定值，然后检查每个可用选项（如果其值存储在此数组中）：

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

  var selections = [];
  $('select option:selected').each(function(){
    if($(this).val())
        selections.push($(this).val());
  })
  $('select option').each(function() {
     $(this).attr('disabled', $.inArray($(this).val(),selections)>-1 && !$(this).is(":selected"));
  });
});

请在此处查看示例：http://jsfiddle.net/398Sj/

Answer 2

经过一些fiddling on jsFiddle我最终得到了这个：

var selects = $("select"),
    options = selects.find("option");

selects.change(function(){
    options.removeAttr("disabled");
    selects.each(function(){
        var idx = $(this).find("option:selected").index(),
            otherSelects = selects.not(this);
        if (idx != null) {
            otherSelects.find("option:eq("+idx+")").attr("disabled", "disabled");
        }
    });
});

我也尝试使用:contains选择器，但没有按预期工作。上面使用索引，只要选项在select元素中具有相同的顺序（即具有相同的索引），它就会起作用。

我建议为每个选项设置一个唯一的value属性（可能是内部ID？），并根据该选项进行选择。然后，它们在select元素中的顺序无关紧要。

请注意，即使HTML4 / 5规范中指定了disabled元素的option属性，但8之前的所有IE版本都缺乏支持。参考：MSDN和Dottoro

根据其值/已选择/未选择，对多个选项禁用/启用选项

2 个答案: