title: Dynamic fill dropdown list with depedent JSON files using JQuery
body: <p>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. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    var countryOptions = '';
    var stateOptions = '';
    var cityOptions = '';
  
    $.getJSON('countries.json', function(data){
      countryOptions += '&lt;option value=""&gt;Select country&lt;/option&gt;';
      $.each(data, function(key, country){
        countryOptions += '&lt;option value="'+country.id+'"&gt;'+country.name+'&lt;/option&gt;';
      });
      $('#country').html(countryOptions);
    });
  
    $(document).on('change', '#country', function(){
     
      var country_id = $(this).val();
      if(country_id != '')
      {
        $.getJSON('states.json', function(data){
          stateOptions += '&lt;option value=""&gt;Select state&lt;/option&gt;';
          $.each(data, function(key, state){
            if(country_id == state.country_id)
            {
              stateOptions += '&lt;option value="'+state.id+'"&gt;'+state.name+'&lt;/option&gt;';
            }
          });
          $('#state').html(stateOptions);
        });
      }
      else
      {
         $('#state').html('&lt;option value=""&gt;Select state&lt;/option&gt;');
         $('#city').html('&lt;option value=""&gt;Select city&lt;/option&gt;');
      }
    });
    
    $(document).on('change', '#state', function(){
      var state_id = $(this).val();
      if(state_id != '')
      {
        $.getJSON('cities.json', function(data){
          cityOptions += '&lt;option value=""&gt;Select city&lt;/option&gt;';
          $.each(data, function(key, city){
            if(state_id == city.state_id)
            {
              cityOptions += '&lt;option value="'+city.id+'"&gt;'+city.name+'&lt;/option&gt;';
            }
          });
          $('#city').html(cityOptions);
        });
      }
      else
      {
         $('#city').html('&lt;option value=""&gt;Select city&lt;/option&gt;');
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;div class="container" style="width:600px;"&gt;
     &lt;h2 align="center"&gt;JSON - Dynamic Dependent Dropdown List using Jquery and Ajax&lt;/h2&gt;&lt;br /&gt;&lt;br /&gt;
     &lt;select name="country" id="country" class="form-control input-lg"&gt;
      &lt;option value=""&gt;Select country&lt;/option&gt;
     &lt;/select&gt;
     &lt;br /&gt;
     &lt;select name="state" id="state" class="form-control input-lg"&gt;
      &lt;option value=""&gt;Select state&lt;/option&gt;
     &lt;/select&gt;
     &lt;br /&gt;
     &lt;select name="city" id="city" class="form-control input-lg"&gt;
      &lt;option value=""&gt;Select city&lt;/option&gt;
     &lt;/select&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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"
   }
  ]</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to solve this problem? i have tried so far, i think the error is in the JQuery loop function <code>$.each(data, function(key, state){});</code></p>