jquery - 如何将json文件连接到依赖多个下拉列表创建

Question

这里我添加了 html JQ 和 json 代码，但是代码没有运行。你能帮我解决这个错误吗？我也将 json 文件保存在 php 文件保存的同一文件夹中。我从网上得到了这个代码。这是代码链接 https://www.webslesson.info/2017/05/json-dynamic-dependent-select-box-using-jquery-and-ajax.html html 代码

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

JQ代码

<script>
$(document).ready(function() {

    load_json_data('country');

    function load_json_data(id, parent_id) {
        var html_code = '';
        $.getJSON('country_state_city.json', function(data) {

            html_code += '<option value="">Select ' + id + '</option>';
            $.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>';
                    }
                }
            });
            $('#' + id).html(html_code);
        });

    }
});
</script>

JSON文件

[
   {
      "id":"1",
      "name":"USA",
      "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":"Alabama",
      "parent_id":"1"
   }
]

标签： jqueryjsonlaravel