修改一个SelectBox的值时如何动态启用其他SelectBox的对应可选值？

问题根因 #

你遇到的两个核心问题分别是：

1. 重置禁用的逻辑未生效：
   • 大概率是getElementsByName匹配不到对应元素，导致获取options时报错，后续循环直接中断。可以先在控制台打印你获取的select元素，确认name属性拼写完全一致。
   • 你写的循环从i=1开始执行，如果你的下拉框option总长度≤1，或者option的下标和值不对应，循环条件一开始就不满足，自然不会进入执行。
2. 原有逻辑缺失去重校验：修改第一个下拉框的值时，没有保留第二个下拉框已经选择的禁用规则，会导致第三个下拉框的禁用状态出现混乱。

修复方案 #

第一个下拉框（name=a）的onChange事件代码 #

// 先获取所有三个下拉元素
const selectA = document.getElementsByName("a")[0];
const selectB = document.getElementsByName("b")[0];
const selectC = document.getElementsByName("c")[0];

// 第一步：重置b、c所有option的禁用状态
for(let i = 0; i < selectB.options.length; i++){
  selectB.options[i].removeAttribute("disabled");
  selectC.options[i].removeAttribute("disabled");
}

// 第二步：禁用a选中的值在b、c中的选项
const selectedA = selectA.value;
selectB.options[selectedA].setAttribute("disabled","disabled");
selectC.options[selectedA].setAttribute("disabled","disabled");

// 第三步：如果b已经选了值，继续在c中禁用该值
const selectedB = selectB.value;
if(selectedB){
  selectC.options[selectedB].setAttribute("disabled","disabled");
}

第二个下拉框（name=b）的onChange事件代码 #

const selectA = document.getElementsByName("a")[0];
const selectB = document.getElementsByName("b")[0];
const selectC = document.getElementsByName("c")[0];

// 先重置c的所有禁用状态
for(let i = 0; i < selectC.options.length; i++){
  selectC.options[i].removeAttribute("disabled");
}

// 分别禁用a和b选中的值
selectC.options[selectA.value].setAttribute("disabled","disabled");
selectC.options[selectB.value].setAttribute("disabled","disabled");

额外适配（如果option的value和下标不对应） #

如果你的下拉框option的value和下标不是一一对应的，比如option的value是字符串"1"、"2"、"3"，但下标是0、1、2，可以用下面的工具函数按value匹配禁用：

function disableOptionByValue(selectEl, targetValue) {
  for(let opt of selectEl.options) {
    if(opt.value === targetValue) {
      opt.setAttribute("disabled", "disabled");
    }
  }
}

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