求助：修复基于HTML和JS的城市-社区级联下拉菜单代码

你的代码核心问题出在onchange事件里的数组取值逻辑：

var z = cityObject[City.value][this.value];

这里cityObject[City.value]已经是当前选中城市对应的社区数组了，你多写了一层[this.value]，导致试图从数组里取一个以城市名为下标的值，结果z变成undefined，后续循环自然无法执行。

修复后的完整代码 #

JavaScript 代码

var cityObject = {
    "City1": ["Neighborhood 1", "Neighborhood 2", "Neighborhood 3", "Neighborhood 4", "Neighborhood 5"],
    "City2": ["Neighborhood 1", "Neighborhood 2"],
    "City3": ["Neighborhood 1", "Neighborhood 2", "Neighborhood 3"],
    "City4": ["Neighborhood 1"]
}
window.onload = function() {
    var City = document.getElementById("City");
    var Neighborhood = document.getElementById("Neighborhood");
    // 初始化城市下拉框
    for (var x in cityObject) {
        City.options[City.options.length] = new Option(x, x);
    }
    // 城市选择变更事件
    City.onchange = function() {
        // 重置社区下拉框，保留默认提示项
        Neighborhood.length = 1;
        // 获取当前选中城市对应的社区数组
        var neighborhoods = cityObject[this.value];
        // 遍历添加社区选项
        for (var i = 0; i < neighborhoods.length; i++) {
            Neighborhood.options[Neighborhood.options.length] = new Option(neighborhoods[i], neighborhoods[i]);
        }
    }
}

HTML 代码

<select id="City" name="City"></select>
<select id="Neighborhood" name="Neighborhood">
   <option value="" selected="selected">Select city first</option>
</select>

额外优化建议（可选） #

• 给城市下拉框添加默认提示项，比如<option value="" selected>Select a city</option>，避免页面加载后直接选中第一个城市但社区未更新的情况
• 用forEach替代传统for循环，让代码更简洁：

  neighborhoods.forEach(neighborhood => {
      Neighborhood.add(new Option(neighborhood, neighborhood));
  });
  

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