如何根据 SelectBox 的值禁用和启用 SelectBox 的选项？

Question

我有 3 个SelectBoxes 。

他们的名字是，让我们说"a","b","c" 。

并且所有SelectBoxes的选项是"1","2","3" 。

如果我在第一个 SelectBox 中选择“1”，则其他两个 SelectBox将禁用“1”。

但是在第一个 SelectBox 中，如果我在选择“1”后选择“2” ，我看到“1”和“2”都被其他 SelectBox 禁用。我该如何使用DOM解决它？

这是我写的代码：

var source = document.getElementsByName("a")[0];
document.getElementsByName("b")[0].options[source.value].setAttribute("disabled","disabled")

此代码使名为“b”的 SelectBox 的第一个 Select Box 值被禁用。

我不想写这样的代码。 我想把它作为一个数组，并使用Loop 。

var target=["a","b","c"]
for (int i=0; i<target.length; i++){
   document.getElementsByName(target[i])[0].options[source.value].setAttribute("disabled","disabled");

}

但是，如果我想更改第一个 SelectBox的值，如何启用其他值，并为其他SelectBox禁用此新值呢？

Answer 1

您可以在值更改时首先启用所有选项，然后仅禁用具有匹配值的选项。

 const a = document.querySelector('select.a'); function disable() { document.querySelectorAll('select:not(.a) > option[disabled]').forEach(x => x.disabled = false); document.querySelectorAll(`select:not(.a) > option[value="${a.value}"]`).forEach(x => x.disabled = true); } disable(); a.addEventListener('change', disable);

 <select class="a"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select class="b"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select class="c"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>