级联依赖下拉菜单失效求助：国家正常，州/城市无法显示

我帮你排查了代码里的几个关键问题，这就是导致州和城市无法加载的原因，下面是修复后的完整代码和问题解析：

问题根源 #

1. 函数逻辑范围错误：你的load_json_data函数里，所有选项生成的逻辑都被包裹在if (id === 'country')判断里，这意味着当加载州或城市数据时，这段逻辑根本不会执行，自然出不来选项。
2. 参数传递错误：选择国家后调用load_json_data('state', parent_id)，这里的parent_id是个未定义的变量，应该传递当前选中的国家ID也就是country_id。
3. 无效的多余逻辑：代码里有一段处理城市切换加载学校的逻辑，但页面上根本没有school下拉框，这部分是无效代码，会干扰逻辑执行。
4. 条件分支嵌套错误：判断父ID的逻辑被放在了国家的分支里，导致州和城市无法匹配对应的父级数据。

修复后的完整代码 #

HTML部分（和原代码一致，无修改） #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weblesson Tutorial | Dynamic Dependent Dropdown List using Jquery and Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br/><br/>
<div class="container" style="width:600px">
<h2 align="center"> JSON Dynamic Dependent Dropdown List using Jquery and Ajax</h2>
<br/><br/>
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br />
<select name="state" id="state" class="form-control input-lg">
<option value="">Select state</option>
</select>
<br/>
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
</div>
</body>
</html>

JavaScript部分（修复后的代码） #

jQuery(document).ready(function () {
    load_json_data('country');

    function load_json_data(id, parent_id) {
        let html_code = '';
        jQuery.getJSON('ucodes1.json', function (data) {
            html_code += '<option value = ""> Select ' + id + '</option>';
            // 移除了原有的if (id === 'country')包裹，让逻辑适用于所有层级
            jQuery.each(data, function (key, value) {
                if (id === 'country') {
                    if (value.parent_id === '0') {
                        html_code += '<option value="' + value.id + '">' + value.name + '</option>';
                    }
                } else {
                    // 处理州和城市的情况，匹配对应的父ID
                    if (value.parent_id === parent_id) {
                        html_code += '<option value="' + value.id + '">' + value.name + '</option>';
                    }
                }
            });
            jQuery('#' + id).html(html_code);
        });
    }

    jQuery(document).on('change', '#country', function () {
        let country_id = jQuery(this).val();
        if (country_id !== '') {
            // 修复：传递正确的country_id作为parent_id
            load_json_data('state', country_id);
        } else {
            jQuery('#state').html('<option value="">Select State</option>');
            jQuery('#city').html('<option value=""> Select City</option>');
        }
    });

    jQuery(document).on('change', '#state', function () {
        let state_id = jQuery(this).val();
        if (state_id !== '') {
            load_json_data('city', state_id);
        } else {
            jQuery('#city').html('<option value="">Select City</option>');
        }
    });

    // 移除无效的school下拉框逻辑，因为页面上不存在该元素
});

关键修改说明 #

1. 重构load_json_data函数逻辑：把原有的if (id === 'country')分支拆分开，单独处理国家（父ID为0）的情况，其他层级（州、城市）统一通过父ID匹配数据。
2. 修正参数传递：国家切换时，把选中的country_id作为父ID传递给load_json_data函数，用于加载对应的州数据。
3. 移除无效代码：删掉了处理school下拉框的逻辑，避免不必要的错误。
4. 调整条件分支结构：确保州和城市的选项生成逻辑能正常执行，不再被国家的判断逻辑阻塞。

现在你可以测试一下，选择North America后，对应的州（New York、Michigan、Texas）应该会正常显示，选择州之后对应的城市也会加载出来。

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