Javascript 根据值从选择框中禁用项目

我试图做的是，当从另一个列表中选择某个项目时，从列表中禁用该项目

例如： 如果我在列表1中选择了一个项目，那么我想在其他列表中禁用该项目（列表2-列表4）

如果然后在列表1中选择另一个项目，我希望它从所有列表中重新启用上一个项目，然后在其他列表中禁用新选择的项目

我希望所有列表都是这样。因此，如果我在其他列表中选择一个项目，它也应该在其他列表中禁用该项目

我试图在JavaScript中实现这一点，而不使用jQuery

我在HTML页面上有4个选择框，如下所示：

项目0
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目0
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目0
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目0
项目1
项目2
项目3
项目4
项目5
项目6
项目7

我尝试使用的JavaScript是：

功能禁用\u项（）{
var selectobject=document.getElementById（“reader1\u区域”）
对于（变量i=0；i<4；i++）{
if（document.getElementById（“list1”）.value==document.getElementById（“list1”）.options[i].value）{
document.getElementById（“list2”）[i].disabled=true；
document.getElementById（“list3”）[i].disabled=true；
document.getElementById（“list4”）[i].disabled=true；
}
if（document.getElementById（“list2”）.value==document.getElementById（“list2”）.options[i].value）{
document.getElementById（“list1”）[i].disabled=true；
document.getElementById（“list3”）[i].disabled=true；
document.getElementById（“list4”）[i].disabled=true；
}
if（document.getElementById（“list3”）.value==document.getElementById（“list3”）.options[i].value）{
document.getElementById（“list1”）[i].disabled=true；
document.getElementById（“list2”）[i].disabled=true；
document.getElementById（“list4”）[i].disabled=true；
}
if（document.getElementById（“list4”）.value==document.getElementById（“list4”）.options[i].value）{
document.getElementById（“list1”）[i].disabled=true；
document.getElementById（“list2”）[i].disabled=true；
document.getElementById（“list3”）[i].disabled=true；
}
}
}

然而，我不认为这是正确的，我相信可能有更好的方法来做到这一点，但就是不能解决它

根据所选项目禁用和重新启用项目的最佳方法是什么？

看这个，这里没有使用jQuery，只有纯js。此处使用了子元素的事件和迭代，而不是明确启用和禁用元素：

var selects_list = document.querySelectorAll('select');
var selects_array = Array.prototype.slice.call(selects_list);

selects_array.forEach(function(someSelect, idx) {
    someSelect.onchange = function(ev) {
        selects_array.forEach(function(tmpSelect) {

                // Disable options of all select elements
                var tmp_item = tmpSelect.querySelector('option[value="' + ev.target.value + '"]');
                tmp_item.disabled = true;

        });
    };
});

---

不是我想要的那样。如果您在列表1中选择了一个项目，那么它应该在所有其他列表中禁用该项目。如果您在列表2中选择了一个项目，那么它应该在所有列表中禁用该项目，但也应该在列表1中禁用另一个项目，但我需要在所有列表中都执行此操作。检查我的JSFIDLE，我已经编辑了一些代码，因此它现在可以按照您所描述的那样工作：选择选项将在所有列表中禁用类似的选项，当您选择新选项时，已禁用的选项将保持禁用状态。希望，我正确地理解了你。