位置选择后州-城市级联下拉无数据问题排查

你的问题核心是动态生成的下拉框未被初始化：页面加载时typeSel和fieldSel这两个元素还不存在（它们是选择"City Name"后才插入到content容器里的），所以原来写在window.onload里的初始化代码找不到目标元素，自然无法填充州选项。

修改后的完整代码 #

<select name='location' onchange='changeText(this.value);' required>
    <option value=''>Search by...</option>
    <option value='ZIP Code'>By ZIP Code</option>
    <option value='City Name'>By City Name</option>
</select>
<div id='content'></div>

<script>
var typeObject = {
    "AZ": ["Phoenix", "Tucson", "Mesa"],
    "FL": ["Jacksonville", "Miami", "Tampa"], // 修正原数据错误：Texas是州，替换为城市Miami
    "CL": ["Aurora", "Denver", "Colorado Springs"], // 修正Springs为完整城市名
};

// 封装州城市级联下拉的初始化逻辑
function initCityStateDropdown() {
    var typeSel = document.getElementById("typeSel"),
        fieldSel = document.getElementById("fieldSel");
    
    // 重置州下拉框（保留默认提示项）
    typeSel.length = 1;
    // 填充州选项
    for (var state in typeObject) {
        typeSel.options[typeSel.options.length] = new Option(state, state);
    }
    
    // 绑定州选择的联动事件
    typeSel.onchange = function () {
        // 重置城市下拉框（保留默认提示项）
        fieldSel.length = 1;
        if (this.selectedIndex < 1) return;
        
        var cities = typeObject[this.value];
        for (var i = 0; i < cities.length; i++) {
            fieldSel.options[fieldSel.options.length] = new Option(cities[i], cities[i]);
        }
    };
}

var data = {
    "ZIP Code": "<p><input placeholder=\"ZIPcode...\" name=\"ZIP\" type=\"number\" required oninvalid=\"this.setCustomValidity('Please enter Valid ZIP Code')\" oninput=\"setCustomValidity('')\"></p>",
    "City Name": "<select name=\"st\" id=\"typeSel\" required><option value=\"\" selected=\"selected\">Pick Your State</option></select><br/><br/><select name=\"ds\" id=\"fieldSel\" required><option value=\"\" selected=\"selected\">Pick Your City</option></select>"
};

function changeText(id) {
    document.getElementById("content").innerHTML = data[id];
    // 选择城市查询方式时，触发下拉框初始化
    if (id === "City Name") {
        initCityStateDropdown();
    }
}
</script>

关键修改点 #

1. 将初始化逻辑抽为独立函数：把原window.onload里的代码封装成initCityStateDropdown，确保只有当州城市下拉框被动态插入后，才执行初始化操作。
2. 动态触发初始化：在changeText函数中判断，当用户选择"City Name"时，立即调用初始化函数，保证元素存在时才进行选项填充和事件绑定。
3. 修正数据错误：清理typeObject中无关的Views项，修正州对应城市的错误数据。

修改后，选择"City Name"时州下拉框会正常加载所有选项，选择州后也会动态联动显示对应城市。

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