级联依赖下拉列表不起作用

Question

我的级联依赖下拉菜单有问题。它会很好地显示国家，但不会显示州和城市。当某些条件存在时，它使用 jQuery 来生成标记。它有一个国家、州和城市下拉框。 When one selects, 'North America' for example, all of the states in the json file should display in the states' dropdown, then the cities.我不确定我做错了什么，但感谢您的帮助。

代码如下：

    <!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>

<script>
    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>';
                jQuery.each(data, function (key, value) {
                    if (id === 'country') {
                        if (value.parent_id === '0') {
                            html_code += '<option value="' + value.id + '">' + value.name + '</option>';
                        }
                        else 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 !== '') {
                load_json_data('state', parent_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>')
            }
        });
        jQuery(document).on('change', '#city', function () {
            let city_id = jQuery(this).val();
            if (city_id !== '') {
                load_json_data('school', city_id)
            } else {
                jQuery('#city').html('<option value="">Select City</option>')
            }
        });
           });

</script>

这是经过验证的 'beautiful' json 文件：

[
 {
  "id": "1",
  "name": "North America",
  "parent_id": "0"
},
{
  "id": "2",
  "name": "Canada",
  "parent_id": "0"
},
{
  "id": "3",
  "name": "Australia",
  "parent_id": "0"
},
{
 "id": "4",
 "name": "New York",
 "parent_id": "1"
},
{
 "id": "5",
 "name": "Michigan",
 "parent_id": "1"
},
{
 "id": "6",
 "name": "Texas",
 "parent_id": "1"
},
{
 "id": "7",
 "name": "New York City",
 "parent_id": "4"
},
{
 "id": "8",
 "name": "Albany",
 "parent_id": "4"
},
{
 "id": "9",
 "name": "Mt Vernon",
 "parent_id": "4"
},
{
 "id": "10",
 "name": "Detroit",
 "parent_id": "5"
},
{
 "id": "11",
 "name": "Kalamazoo",
 "parent_id": "5"
},
{
 "id": "12",
 "name": "Ypsilanti",
 "parent_id": "5"
},
{
 "id": "13",
 "name": "Austin",
 "parent_id": "6"
},
{
 "id": "14",
 "name": "San Antoinio",
 "parent_id": "6"
},
{
 "id": "15",
 "name": "Dallas",
 "parent_id": "6"
} 

]

Answer 1

我成功了。首先，我升级到 jQuery 3.3.1。目前的方法是一个测试，但最终，我想从网络 api 数据库中提取数据。我在 mLab 上创建了一个帐户并将 json 文档放在那里，复制了必要的 api uri 并在代码中使用它。代码位于 Plunker.

级联依赖下拉列表不起作用

Cascading Dependent Dropdown not working

jquery

json

cascadingdropdown