I'm having an issue with my cascading dependent dropdown. It will display the countries just fine but the states and cities will not display. It uses jQuery to produce markup when certain conditions exist. It has a country, state and city dropdown box. When one selects, 'North America' for example, all of the states in the json file should display in the states' dropdown, then the cities. I'm not sure what i'm doing wrong, but any help is appreciated.
Here is the code:
<!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>
Here is the verified 'beautiful' json file:
[
{
"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"
}
]
I got it working. First, I upgraded to jQuery 3.3.1. This current approach was a test but ultimately, I wanted to pull the data from a web api database. I created an account on mLab and placed the json docs there, copied the necessary api uri and used it in the code. The code is located on Plunker.