Ajax, JSON, jQuery Example

Request JSON from server, then format into a list.

by nicolas tenorio

HTML

<script src="//code.jquery.com/jquery-1.12.4.js"></script>

    <select id="country"></select>
    <select id="state"></select>
      <select id="city"></select>

CSS

.overflow {
      height: 200px;
    }

JavaScript

$(document).ready(function(){
  var countryOptions = '';
  var stateOptions = '';
  var cityOptions = '';

  $.getJSON('https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/countries.json', function(data){countryOptions += '<option value="">Seccione pais</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('https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/states.json', function(data){
        stateOptions = '<option value="">Seleccione departamento</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('https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/cities.json', function(data){
        cityOptions += '<option value="">Seleccione ciudad</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>');
    }
  });
});