Question

我的级联依赖下拉列表存在问题。它会显示国家，但州和城市将不会显示。当某些条件存在时，它使用jQuery生成标记。它有一个国家，州和城市的下拉框。当选择“北美”时，例如，json文件中的所有状态都应显示在状态＆＃39;下降，然后是城市。我不确定我做错了什么，但感谢任何帮助。

以下是代码：

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

这是经过验证的美丽＆＃39; 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。目前的方法是一个测试，但最终，我想从web api数据库中提取数据。我在mLab上创建了一个帐户并将json文档放在那里，复制了必要的api uri并在代码中使用它。该代码位于Plunker。

级联依赖下拉不起作用

1 个答案: