带条件数据的Drop-Down Lists：二级下拉框联动问题求助

我来帮你搞定这个动态下拉列表的问题！其实你之前的思路是对的，大概率是在清空旧选项、动态添加新选项这些细节上没处理到位。我给你写一个完整的可运行示例，跟着做就能实现需求：

第一步：先写HTML结构 #

给两个下拉框加上唯一ID，方便JavaScript获取元素：

<!-- 第一个下拉列表 -->
<select id="firstDropdown">
  <option value="">请选择</option>
  <option value="A">选项A</option>
  <option value="B">选项B</option>
</select>

<!-- 第二个下拉列表 -->
<select id="secondDropdown">
  <option value="">请先选择第一个选项</option>
</select>

第二步：用JavaScript实现联动逻辑 #

我用对象来存储两个下拉框的对应关系，比一堆if语句更简洁，以后加新选项也方便维护：

// 定义第一个下拉选项和第二个下拉选项的对应关系
const dropdownMap = {
  "A": ["1", "2", "3"],
  "B": ["5", "6", "7"]
};

// 获取页面上的两个下拉框元素
const firstSelect = document.getElementById('firstDropdown');
const secondSelect = document.getElementById('secondDropdown');

// 给第一个下拉框绑定「选项变化」事件
firstSelect.addEventListener('change', function() {
  // 获取当前选中的第一个下拉框的值
  const selectedKey = this.value;
  
  // 先清空第二个下拉框的所有旧选项，避免残留
  secondSelect.innerHTML = '';

  if (selectedKey) {
    // 如果选中了有效选项，先加一个默认提示项
    const defaultOption = document.createElement('option');
    defaultOption.value = '';
    defaultOption.textContent = '请选择';
    secondSelect.appendChild(defaultOption);

    // 循环添加对应选项到第二个下拉框
    dropdownMap[selectedKey].forEach(item => {
      const option = document.createElement('option');
      option.value = item; // 这里value和文本一致，你也可以自定义不同的value
      option.textContent = item;
      secondSelect.appendChild(option);
    });
  } else {
    // 如果没选中第一个下拉的有效选项，重置第二个下拉的提示
    const emptyOption = document.createElement('option');
    emptyOption.value = '';
    emptyOption.textContent = '请先选择第一个选项';
    secondSelect.appendChild(emptyOption);
  }
});

关键细节说明 #

• 一定要先清空第二个下拉框的旧选项，不然之前的选项会和新选项混在一起；
• 用对象存储对应关系，比if-else更易维护，以后要加新选项，直接在dropdownMap里加键值对就行；
• 处理了「未选中有效选项」的情况，给用户友好的提示信息。

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