I have 3 dependent JSON files that are related together, which are countries.json, states.json and cities.json and i want to fill 3 dropdowns select box with those json files i have. For the first time i select a country in the first dropdown, i see its states in the second dropdown but the problem comes when i select another country, its states come with the states of the previous selected country.
$(document).ready(function(){
var countryOptions = '';
var stateOptions = '';
var cityOptions = '';
$.getJSON('countries.json', function(data){
countryOptions += '<option value="">Select country</option>';
$.each(data, function(key, country){
countryOptions += '<option value="'+country.id+'">'+country.name+'</option>';
});
$('#country').html(countryOptions);
});
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
$.getJSON('states.json', function(data){
stateOptions += '<option value="">Select state</option>';
$.each(data, function(key, state){
if(country_id == state.country_id)
{
stateOptions += '<option value="'+state.id+'">'+state.name+'</option>';
}
});
$('#state').html(stateOptions);
});
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
$.getJSON('cities.json', function(data){
cityOptions += '<option value="">Select city</option>';
$.each(data, function(key, city){
if(state_id == city.state_id)
{
cityOptions += '<option value="'+city.id+'">'+city.name+'</option>';
}
});
$('#city').html(cityOptions);
});
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
//countries.json
[
{
"id":"1",
"name":"USA"
},
{
"id":"2",
"name":"Canada"
},
{
"id":"3",
"name":"Australia"
}
]
//states.json
[
{
"id":"4",
"name":"New York",
"country_id":"1"
},
{
"id":"5",
"name":"Alabama",
"country_id":"1"
},
{
"id":"6",
"name":"California",
"country_id":"1"
},
{
"id":"7",
"name":"Ontario",
"country_id":"2"
},
{
"id":"8",
"name":"British Columbia",
"country_id":"2"
},
{
"id":"9",
"name":"New South Wales",
"country_id":"3"
},
{
"id":"10",
"name":"Queensland",
"country_id":"3"
}
]
//cities.json
[
{
"id":"11",
"name":"New York city",
"state_id":"4"
},
{
"id":"12",
"name":"Buffalo",
"state_id":"4"
},
{
"id":"13",
"name":"Albany",
"state_id":"4"
},
{
"id":"14",
"name":"Birmingham",
"state_id":"5"
},
{
"id":"15",
"name":"Montgomery",
"state_id":"5"
},
{
"id":"16",
"name":"Huntsville",
"state_id":"5"
},
{
"id":"17",
"name":"Los Angeles",
"state_id":"6"
},
{
"id":"18",
"name":"San Francisco",
"state_id":"6"
},
{
"id":"19",
"name":"San Diego",
"state_id":"6"
},
{
"id":"20",
"name":"Toronto",
"state_id":"7"
},
{
"id":"21",
"name":"Ottawa",
"state_id":"7"
},
{
"id":"22",
"name":"Vancouver",
"state_id":"8"
},
{
"id":"23",
"name":"Victoria",
"state_id":"8"
},
{
"id":"24",
"name":"Sydney",
"state_id":"9"
},
{
"id":"25",
"name":"Newcastle",
"state_id":"9"
},
{
"id":"26",
"name":"City of Brisbane",
"state_id":"10"
},
{
"id":"27",
"name":"Gold Coast",
"state_id":"10"
}
]
How to solve this problem? i have tried so far, i think the error is in the JQuery loop function $.each(data, function(key, state){});
Advertisement
Answer
$.getJSON('states.json', function(data){
stateOptions +=
This is appending to your existing data when you get new data. Change it to this:
$.getJSON('states.json', function(data){
stateOptions =
$(document).ready(function(){
var countryOptions = '';
var stateOptions = '';
var cityOptions = '';
$.getJSON('countries.json', function(data){
countryOptions += '<option value="">Select country</option>';
$.each(data, function(key, country){
countryOptions += '<option value="'+country.id+'">'+country.name+'</option>';
});
$('#country').html(countryOptions);
});
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
$.getJSON('states.json', function(data){
stateOptions = '<option value="">Select state</option>';
$.each(data, function(key, state){
if(country_id == state.country_id)
{
stateOptions += '<option value="'+state.id+'">'+state.name+'</option>';
}
});
$('#state').html(stateOptions);
});
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
$.getJSON('cities.json', function(data){
cityOptions += '<option value="">Select city</option>';
$.each(data, function(key, city){
if(state_id == city.state_id)
{
cityOptions += '<option value="'+city.id+'">'+city.name+'</option>';
}
});
$('#city').html(cityOptions);
});
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
Note The code snippet is just for OPs sake. It won’t run because it utilizes Get requests.