Populate select options from JSON data

Question

I am racking my brains I have some code to populate Country/State/City. I have a json variable and I have managed to populate the State on Country change but struggling now to get the City to change on State.

Json:

var myJson = {
"region": [
    {
        "name": "Andalusia",
        "id": "andalusia",
        "states": [
            {
                "name": "Almeria",
                "id": "usaState1",
                "cities": [
                    {
                        "name": "City 1",
                        "id": "usaState1City1",
                        "area": "12345 sqkm"
                    },
                    {
                        "name": "City 2",
                        "id": "usaState1City2",
                        "area": "12345 sqkm"
                    }
                ]
            },
            {
                "name": "Cadiz",
                "id": "cadiz",
                "cities": [
                    {
                        "name": "City 3",
                        "id": "usaState2City3",
                        "area": "12345 sqkm"
                    },
                    {
                        "name": "City 4",
                        "id": "usaState2City4",
                        "area": "12345 sqkm"
                    }
                ]
            }
    ]
}

The above is just a snippet of the Json code: Here is the Jquery I have managed to get the State change on Country:

$('#country').on('change', function(){
  console.log($(this).val());
  for(var i = 0; i < myJson.region.length; i++)
  {
    if(myJson.region[i].id == $(this).val())
    {
      $('#state').html('<option value="000">-Select State-</option>');
      $.each(myJson.region[i].states, function (index, value) {
        $("#state").append('<option value="'+value.id+'">'+value.name+'</option>');
      });
    }
  }
});

$('#state').on('change', function(){  
  console.log($(this).val());
  for(var i = 0; i < myJson.region.length; i++)
  {
    if(myJson.region[i].id == $(this).val())  
    {
       $('#city').html('<option value="000">-Select State-</option>');
       $.each(myJson.region[i].states.cities, function (index, value) {
          $("#city").append('<option value="'+value.id+'">'+value.name+'</option>');
      });
    }
  }
});

The code I am trying is the Change City, I need to get the Cities to display.

Answer 1

You're looking for a region (country) that matches your state value. That's not going to work. Find the region first, then check against its states:

$('#state').on('change', function(){
  var stateId = $(this).val();
  var countryId = $("#country").val();

  for (var i = 0; i < myJson.region.length; i++)
  {
    if (myJson.region[i].id == countryId)
    {
      var states = myJson.region[i].states;

      for (var j = 0; j < states.length; j++)
      {
        if (states[j].id == stateId)
        {
          $('#city').html('<option value="000">-Select State-</option>');
          $.each(states[j].cities, function (index, value) {
            $("#city").append('<option value="'+value.id+'">'+value.name+'</option>');
          });
        }
      }
    }
  }
});