【发布时间】：2018-10-22 04:37:20
【问题描述】：
我的级联依赖下拉菜单有问题。它会很好地显示国家，但不会显示州和城市。当某些条件存在时，它使用 jQuery 生成标记。它有一个国家、州和城市的下拉框。例如，当一个选择“北美”时，JSON文件中的所有状态都应显示在状态的“下拉”下拉，然后是城市。我不确定我做错了什么，但感谢任何帮助。
代码如下：
<!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>
这是经过验证的“美丽”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"
}
]
【问题讨论】：
标签： jquery json cascadingdropdown