原生JS实现二级下拉联动时无法检测选中值变化，仅显示首个选项如何解决

对照现有实现的运行逻辑，所有异常都来自三个明确的代码问题，没有复杂的隐性bug：

• 事件绑定逻辑错位：二级下拉#output没有绑定任何change事件，用户切换二级选项时根本不会触发内容更新；给<p id="district">绑定onchange属于无效操作，onchange仅能在表单交互元素（select、input、textarea）上触发，文本容器永远不会响应这个事件。
• 函数执行顺序倒置：原有代码在random_function中，先给#district赋值一次，再重新生成二级下拉的选项；新生成的二级选项默认自动选中列表第一项，函数最后又把这个固定的第一项值赋给#district，不管用户之前选了什么内容，最终展示的永远是最新选项列表的第一个值。
• 缺失边界异常处理：当一级下拉选中默认的"select option"占位项时，数组arr没有被赋值，后续循环拼接选项的逻辑会直接抛出未定义变量的错误，中断脚本运行。

整个方案完全不依赖jQuery，通过拆分函数职责、修正事件绑定、调整执行顺序即可解决问题，具体修改点：

• 把"更新district展示内容"的逻辑拆成独立函数，分别给两个下拉元素绑定对应的触发事件
• 用对象存储地区映射关系，避免重复写零散的if判断逻辑
• 调整执行顺序：先根据一级下拉选中值生成对应二级选项，再同步更新展示内容
• 增加边界判断，避免未选中有效一级地区时脚本报错
• 去掉无效的事件绑定，用textContent替换不必要的innerHTML赋值，降低XSS风险

修复后完整代码 #

<!-- HTML结构部分 -->
<select id="input" onchange="handleFirstSelectChange()">
  <option value="">select option</option>
  <option value="INDIA">INDIA</option>
  <option value="USA">USA</option>
</select>
<div>
  <!-- 给二级下拉绑定独立的change事件 -->
  <select id="output" onchange="updateDistrictDisplay()">
    <option value=""></option>
  </select>
</div>
<div>
  <!-- 去掉p标签上无效的onchange绑定 -->
  <p id="district"></p>
</div>

// JS逻辑部分
// 集中存储地区和对应下属区县的映射关系
const regionConfig = {
  INDIA: ["Maharashtra", "Delhi"],
  USA: ["Washington", "Texas", "New York"]
}

// 一级下拉切换时的处理逻辑：生成对应二级选项
function handleFirstSelectChange() {
  const firstSelectValue = document.getElementById("input").value;
  const secondSelect = document.getElementById("output");
  // 先清空二级下拉的原有选项
  secondSelect.innerHTML = "";

  // 边界判断：仅当一级选中的地区存在映射关系时，才生成对应二级选项
  if (regionConfig[firstSelectValue]) {
    const optionsHtml = regionConfig[firstSelectValue]
      .map(regionName => `<option value="${regionName}">${regionName}</option>`)
      .join("");
    secondSelect.innerHTML = optionsHtml;
  } else {
    // 选中占位选项时，给二级下拉设置提示内容
    secondSelect.innerHTML = "<option value=''>请先选择一级地区</option>";
  }
  // 二级选项生成完成后，同步更新展示内容
  updateDistrictDisplay();
}

// 单独处理district容器的内容更新，支持二级下拉直接触发
function updateDistrictDisplay() {
  const selectedRegion = document.getElementById("output").value;
  // 纯文本赋值用textContent，更安全高效
  document.getElementById("district").textContent = selectedRegion;
}

修复后的交互逻辑完全匹配需求：

• 选择一级下拉的USA选项时，二级下拉自动加载Washington、Texas、New York三个选项
• 不管用户在二级下拉切换到哪个选项，#district容器都会实时同步展示当前选中的地区名，不会固定展示第一个选项值
• 切换回INDIA或空选项时，二级下拉会同步更新对应选项列表，展示内容也会同步重置

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