如何通过DOM实现根据SelectBox取值动态禁用和启用其他SelectBox的选项

我明白你遇到的麻烦了：三个下拉框a、b、c都有1、2、3三个选项，要求a选中某个值时，b和c里对应的选项要禁用，但现在切换a的选中值后，之前禁用的选项没法恢复，导致多个选项被锁死。

核心问题在于你之前的代码只做了「禁用新选项」的操作，没有「恢复旧禁用选项」的步骤。下面用数组循环的方式帮你搞定，完全避免重复代码：

完整实现代码 #

// 获取作为控制源的下拉框（名称为a的第一个SelectBox）
const sourceSelect = document.getElementsByName("a")[0];
// 定义需要被控制的目标下拉框名称数组
const targetSelectNames = ["b", "c"];

// 给源下拉框绑定选中变化事件
sourceSelect.addEventListener("change", function() {
  // 第一步：先把所有目标下拉框的所有选项都恢复为可用状态
  targetSelectNames.forEach(selectName => {
    const targetSelect = document.getElementsByName(selectName)[0];
    // 遍历当前下拉框的每一个选项，移除disabled属性
    Array.from(targetSelect.options).forEach(option => {
      option.removeAttribute("disabled");
    });
  });

  // 第二步：获取当前源下拉框的选中值，禁用目标下拉框中对应的选项
  const currentSelectedValue = this.value;
  if (currentSelectedValue) {
    targetSelectNames.forEach(selectName => {
      const targetSelect = document.getElementsByName(selectName)[0];
      // 注意：options是索引从0开始，而选项值是1/2/3，所以要减1对应正确索引
      targetSelect.options[currentSelectedValue - 1].setAttribute("disabled", "disabled");
    });
  }
});

// 可选：页面加载完成后自动触发一次change事件，确保初始状态符合要求
sourceSelect.dispatchEvent(new Event("change"));

关键逻辑说明 #

1. 先恢复再禁用：每次a的选中值变化时，先把b和c的所有选项都恢复可用，彻底解决之前残留禁用状态的问题——不管之前锁了哪个选项，先全部放开，再重新锁当前需要禁用的选项。
2. 数组循环简化代码：用forEach遍历目标下拉框数组，避免重复写控制b和c的代码，后续如果要加更多下拉框，只需要往数组里加名称就行。
3. 索引对应处理：因为下拉框的options集合是从0开始索引的，但你的选项值是1、2、3，所以要把选中值减1才能拿到正确的选项对象，这是很容易踩的小坑。
4. 初始状态处理：最后手动触发一次change事件，确保页面刚加载时，如果a有默认选中值，b和c能同步禁用对应的选项。

内容的提问来源于stack exchange，提问作者user15974221