Dynamic fill dropdown list with depedent JSON files using JQuery

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){});

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.

Advertisement

Answer