从JSON数据填充选择选项

时间:2014-08-05 15:43:54

标签: jquery json

我绞尽脑汁我有一些代码来填充国家/州/市。我有一个json变量,我已经成功填补了国家的国家变化,但现在正努力让纽约市改变国家。

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"
                    }
                ]
            }
    ]
}

以上只是Json代码的片段:这是我设法在国家/地区进行状态更改的Jquery:

$('#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>');
      });
    }
  }
});

我正在尝试的代码是转换城市,我需要显示城市。

1 个答案:

答案 0 :(得分:1)

您正在寻找与region值匹配的state(国家/地区)。那不行。首先找到该地区,然后检查其状态:

$('#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>');
          });
        }
      }
    }
  }
});