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

j91ykkif 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(266)

我有3个选择框。
他们的名字是，让我们说“a”、“b”、“c”。
所有选择框的选项都是“1”、“2”、“3”。
如果我在第一个选择框中选择“1”，则其他两个选择框的“1”将被禁用。
但在第一个选择框中，如果我在选择“1”之后选择“2”，我会看到其他选择框的“1”和“2”都被禁用。。如何使用dom解决它？
以下是我编写的代码：

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

此代码使名为“b”的selectbox禁用了first select box的值。
我不想写这样的代码。我想把它作为一个数组，并使用循环。

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

}

但是如果我想更改first selectbox的值，如何启用其他值，并禁用其他selectbox的新值呢？

JavaScript Dom

来源：https://stackoverflow.com/questions/68319229/how-to-disable-and-enable-selectboxs-options-depending-on-a-selectboxs-value

1条答案

按热度按时间

4dc9hkyq1#

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

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>

赞(0）回复(0）举报 2021-09-23

我来回答

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

1条答案

相关问题

热门标签

最新问答