Question

我想为国家/地区和城市创建级联下拉菜单。我还要填写城市下拉列表，到目前为止，国家和州都可以，我缺少什么？这是我到目前为止所得到的：

<form id="dropdowns" action="index.html">

        <label>Country:</label>
            <select id="country" name="country">
                <option value="000">-Select Country-</option>
            </select>

        <br />

        <label>State:</label>
            <select id="state" name="network">
                <option value="000">-Select State-</option>
            </select>

        <br />

        <label>City:</label>
            <select id="model" name="model">
                <option value="000">-Select City-</option>
            </select>

        <br />

</form>

这就是我用于测试的目的：

var myJson = {
"country": [
    {
        "name": "United States",
        "id": "usa",
        "states": [
            {
                "name": "State 1 USA",
                "id": "usaState1",
                "cities": [
                    {
                        "name": "City 1",
                        "id": "usaState1City1",
                        "area": "12345 sqkm"
                    },
                    {
                        "name": "City 2",
                        "id": "usaState1City2",
                        "area": "12345 sqkm"
                    }
                ]
            },
            {
                "name": "State 2 USA",
                "id": "usaState2",
                "cities": [
                    {
                        "name": "City 3",
                        "id": "usaState2City3",
                        "area": "12345 sqkm"
                    },
                    {
                        "name": "City 4",
                        "id": "usaState2City4",
                        "area": "12345 sqkm"
                    }
                ]
            }
        ]
    },
    {
        "name": "Australia",
        "id": "aus",
        "states": [
            {
                "name": "State 1 Australia",
                "id": "ausState1",
                "cities": [
                    {
                        "name": "City 5",
                        "id": "ausState1City5",
                        "area": "12345 sqkm"
                    },
                    {
                        "name": "City 6",
                        "id": "ausState1City6",
                        "area": "12345 sqkm"
                    }
                ]
            },
            {
                "name": "State 2 Australia",
                "id": "ausState2",
                "cities": [
                    {
                        "name": "City 7",
                        "id": "ausState2City7",
                        "area": "12345 sqkm"
                    },
                    {
                        "name": "City 8",
                        "id": "ausState2City8",
                        "area": "12345 sqkm"
                    }
                ]
            }
        ]
    }
]
}

这是jquery脚本：

$.each(myJson.country, function (index, value) {
$("#country").append('<option value="'+value.id+'">'+value.name+'</option>');
});

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

    {
      //console.log(myJson.country[i].states.id);
       $('#model').html('<option value="000">Cities</option>');
       $.each(myJson.country[i].states.cities, function (index, value) {
          $("#model").append('<option value="'+value.id+'">'+value.name+'</option>');
      });
    }
  }
 });

Answer 1

change state函数中需要另一个嵌套循环。您正在引用myJson.country[i].states.id。但是myJson.country[i].states是一个数组。它没有id属性。您将需要循环遍历该数组并查找具有匹配状态id的所有城市。我建议将您的对象展平为具有关联状态id的城市列表;尝试这样的事情：

function getCities() {
    var cities = [];
    for(var i = 0; i < myJson.country.length; i++) {
      var country = myJson.country[i];
      for(var j = 0; j < country.states.length; j++) {
          var state = country.states[j];
          for (var k = 0; k < state.cities.length; k++) {
            var city = state.cities[k];
            cities.push({
                stateId: state.id,
                stateName: state.name,
                cityId: city.id,
                cityName: city.name
            });
          }
      }
    }
    return cities;
}

然后在state change事件中使用此功能：

  $('#state').on('change', function(){
    console.log($(this).val());
    var cities = getCities();
    $('#model').html('<option value="000">-Select State-</option>');
    var stateId = $(this).val();
    $.each(cities, function (index, value) {
      if (value.stateId == stateId) {
        $("#model").append('<option value="'+value.cityId +'">'+value.cityName+'</option>');
      }
    });
  });

工作示例：https://jsfiddle.net/mspinks/40916zn4/7/

Answer 2

我对原始代码进行了一些修改。我在我的代码中添加了另一个for循环。

$('#state').on('change', function(){
      console.log($(this).val());
      for(var i = 0; i < myJson.country.length; i++)
        {
            for(var j = 0; j < myJson.country[i].states.length; j++) {

                if(myJson.country[i].states[j].id == $(this).val())

                {
                   $('#model').html('<option value="000">Cities</option>');
                   $.each(myJson.country[i].states[j].cities, function (index, value) {
                      $("#model").append('<option value="'+value.id+'">'+value.name+'</option>');
                    });
                }
            }
        }
     });

国家/州/市依赖选择与json＆amp; jQuery的

2 个答案: