[英]Country/state/city depedent select with json & jquery
I want to create a cascade dropdowns for country state and city. 我想为乡村国家和城市创建一个级联下拉菜单。 I want to also populate the city dropdown, so far country and state are ok, what am i missing?
我还想填充城市下拉列表,到目前为止,国家和州都还可以,我还缺少什么? This is what i got so far:
这是我到目前为止所得到的:
<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>
This is what i'm using for test purposes: 这是我用于测试目的:
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"
}
]
}
]
}
]
}
And this is the jquery script: 这是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>');
});
}
}
});
I can't get it work: 我无法正常工作:
$('#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>');
});
}
}
});
You'll need another nested loop in your change
function for state
. 您需要在
change
函数中为state
另一个嵌套循环。 You are referencing myJson.country[i].states.id
. 您正在引用
myJson.country[i].states.id
。 But myJson.country[i].states
is an array. 但是
myJson.country[i].states
是一个数组。 It doesn't have an id
attribute. 它没有
id
属性。 You will need to loop through that array and find all cities with a matching state id
. 您将需要遍历该数组并查找具有匹配状态
id
所有城市。 I would recomment flattening your object into a list of cities with an associated state id
; 我建议将您的对象展平到具有相关州
id
的城市列表中; Try something like this: 尝试这样的事情:
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;
}
And then use this in your state
change
event: 然后在
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>');
}
});
});
Working example: https://jsfiddle.net/mspinks/40916zn4/7/ 工作示例: https : //jsfiddle.net/mspinks/40916zn4/7/
I have a little modification in the original code. 我对原始代码做了一些修改。 I have added another for loop in my code.
我在代码中添加了另一个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>');
});
}
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.