Jquery 根据多个选项的值/已选/未选禁用/启用选项

预期结果：

• 4个下拉选择框，每个框具有相同的6个选项
• 选择一个选项后，它将在其他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>

我也试过：

 $(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个选项，我尝试过；）

经过一段时间后，我最终得到了以下结论：

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

我也尝试了选择器，但没有按预期工作。上述方法使用索引，只要选项在

select

元素中的顺序相同（即具有相同的索引），就可以使用索引

我建议为每个选项设置一个唯一的

值

属性（可能是内部id？），并根据该属性进行选择。那么它们在

select

元素中的顺序就无关紧要了

请注意，尽管HTML4/5规范中指定了

选项

元素的

禁用

属性，但8之前的所有IE版本都缺乏支持。参考资料：和

经过一段时间后，我得出以下结论：

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

我也尝试了选择器，但没有按预期工作。上述方法使用索引，只要选项在

select

元素中的顺序相同（即具有相同的索引），就可以使用索引

我建议为每个选项设置一个唯一的

值

属性（可能是内部id？），并根据该属性进行选择。那么它们在

select

元素中的顺序就无关紧要了

---

请注意，尽管HTML4/5规范中指定了

选项

元素的

禁用

属性，但8之前的所有IE版本都缺乏支持。参考：一种解决方案是在每次更改时将所有选定值保存在一个数组中，然后检查每个可用选项的值是否存储在此数组中：

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

---

请参见此处的示例：

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

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

---

看看这里的例子：

@justkt，嗯？在这里效果很好：）@Marcus-看，我知道还有更多。@justkt，最上面的答案使用w3schools作为参考。我会让它自己说话的。至于

option

元素上的

disabled

属性，我将引用@justkt，它是偶数。只有8之前的IE版本才会缺少支持。@Marcus-我刚刚意识到我记错了-是hide不受支持。@justkt，嗯？在这里效果很好：）@Marcus-看，我知道还有更多。@justkt，最上面的答案使用w3schools作为参考。我会让它自己说话的。至于

option

元素上的

disabled

属性，我将引用@justkt，它是偶数。只有8之前的IE版本才会缺少支持。@Marcus-我刚刚意识到我记错了-hide不受支持。这与我的方法之间的区别是，这也会禁用选择位置的选项，这在提交表单时是个问题。谢谢，我没有看到。为了避免这个问题，我刚刚修改了我的答案。谢谢大家！这对我很有帮助：）这和我的方法之间的区别是，这也会禁用选择位置的选项，这在您提交表单时是个问题。谢谢，我没有看到。为了避免这个问题，我刚刚修改了我的答案。谢谢大家！这对我帮助很大：）谢谢你的帮助和提示：）我会记住的，承诺：）谢谢你的帮助和提示：）我会记住的，承诺：）