三级级联下拉菜单如何跳过二级选择直接根据一级选项加载三级内容

代码修改方案 #

你原有代码的核心问题有两个：

1. 给region同时绑定了两个change事件回调one和three，两个回调都会清空city和三级选项，逻辑冲突
2. three函数中尝试用city.value（也就是默认的"ALL"）去取级联数据，但你的dropdown对象里没有名为"ALL"的city键，自然取不到对应的值

以下是修改后的完整可运行代码：

JavaScript 代码

window.addEventListener('load', function() {
  let region = document.getElementById("region");
  let city = document.getElementById("city");
  let theOptions = document.getElementById("theOptions");
  // 配置需要跳过二级city选择的一级region值
  const skipCityRegions = ['region3'];
  let dropdown = {
    "region1": {
      "city1": ["option1", "option2", "option3"],
      "city2": ["option1", "option2", "option3"],
      "city3": ["option1", "option2", "option3"]
    },
    "region2": {
      "city1": ["option1", "option2", "option3"],
      "city2": ["option1", "option2", "option3"],
      "city3": ["option1", "option2", "option3"]
    },
    "region3": {
      "city1": ["option1", "option2", "option3"],
      "city2": ["option1", "option2", "option3"],
      "city3": ["option1", "option2", "option3"]
    }
  };
  for (let x in dropdown) {
    region.options[region.options.length] = new Option(x, x)
  };

  function one() {
    // 清空city和theOptions下拉选项
    city.length = 1;
    theOptions.length = 1;
    const currentRegion = this.value;
    // 加载city选项
    for (let y in dropdown[currentRegion]) {
      city.options[city.options.length] = new Option(y, y)
    }
    // 判断当前region是否需要跳过city选择
    if (skipCityRegions.includes(currentRegion)) {
      // 合并当前region下所有city的三级选项
      const allOptions = [];
      for (const cityKey in dropdown[currentRegion]) {
        allOptions.push(...dropdown[currentRegion][cityKey]);
      }
      // 可选：对选项去重
      const uniqueOptions = [...new Set(allOptions)];
      // 加载到三级下拉框
      for (let i = 0; i < uniqueOptions.length; i++) {
        theOptions.options[theOptions.options.length] = new Option(uniqueOptions[i], uniqueOptions[i])
      }
    }
  };

  function two() {
    // 清空theOptions下拉选项
    theOptions.length = 1;
    // 加载对应选项
    let z = dropdown[region.value][this.value];
    for (let i = 0; i < z.length; i++) {
      theOptions.options[theOptions.length] = new Option(z[i], z[i])
    }
  };

  region.addEventListener("change", one)
  city.addEventListener("change", two)
});

HTML 代码（可选优化，给默认选项加空value更规范）

<select id="region">
  <option value="">ALL</option>
</select>
<select id="city">
  <option value="">ALL</option>
</select>
<select id="theOptions">
  <option value="">ALL</option>
</select>

实现效果 #

• 选中region1/region2时，保持原有逻辑：需要选择city后才会加载三级选项
• 选中region3时，无需选择city，会自动合并该区域下所有城市的三级选项直接加载，也可以后续选择city进一步筛选三级选项
• 后续需要新增支持跳过二级的区域，直接往skipCityRegions数组里加对应region值即可

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