使用json & jquery进行国家/州/城市相关选择
使用json & jquery进行国家/州/城市相关选择
提问于 2017-02-07 03:49:06
我想为国家、州和城市创建一个级联下拉列表。我还想填充城市下拉列表，到目前为止，国家和州都可以，我遗漏了什么？这就是我到目前为止得到的：
<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>');
});
}
}
});回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-07 04:46:12
您需要在state的change函数中使用另一个嵌套循环。您引用的是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>');
}
});
});Stack Overflow用户
发布于 2017-05-26 19:15:23
我在原始代码中做了一点修改。我在代码中添加了另一个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>');
});
}
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42076073
复制相关文章
相似问题
腾讯云开发者
