我正在尝试填充链式州市选择下拉列表。我使用外部json文件来执行此操作,其中包括State及其对应的城市名称,id和pincode。有人可以对如何实现这一点提出一些看法。我需要根据状态选择填充城市和密码值。提前谢谢......
{
"Alaska" : [
{"id": "1", "name": "Adak", "pincode": "xxx1"},
{"id": "2", "name": "Akhiok", "pincode": "xxx2" },
{"id": "3", "name": "Akiak", "pincode": "xxx3" },
],
"Arizona" : [
{"id": "4", "name": "Apache Junction", "pincode": "xxx4"},
{"id": "5", "name": "Avondale", "pincode": "xxx5"},
{"id": "6", "name": "Benson", "pincode": "xxx6"},
],
"Alabama" : [
{"id" : "5", "name": "Abbeville", "pincode": "xxx7" },
{"id" : "7", "name": "Adamsville", "pincode": "xxx8" },
{"id" : "8", "name": "Akron", "pincode": "xxx9" },
]
}
<select id="state">
<option value="1">Alaska</option>
<option value="2">Arizona</option>
<option value="3">Alabama</option>
</select>
<select id="city">
<option value="4">Adak</option>
<option value="5">Akhiok</option>
<option value="6">Akiak</option>
</select>
<input id="pincode" type="text" />
答案 0 :(得分:3)
我发现你的问题很有趣,并写了相应的解决方案,你可以看到实时here。
以下是代码:
jQuery(document).ready(function () {
var myData;
var onCityChange = function (e) {
var cityData = $("option:selected", e.target).data('pincode');
$("#pincode").val(cityData.pincode);
};
var onStateChange = function (e) {
var state = $("option:selected", e.target).text();
if (state && myData) {
var stateData = myData[state];
if (stateData && stateData.length > 0) {
$("#city").empty();
$("#city").unbind('change');
for (var i = 0; i < stateData.length; i++) {
var cityData = stateData[i];
var option = $('<option value="' + cityData.id + '">' + cityData.name + '</option>')
.data('pincode', cityData);
$("#city").append(option);
}
$("#city").bind('change', onCityChange)
.trigger('change');
}
}
};
$.ajax({
url: 'DependendSelectsFromJson.json',
dataType: 'json',
success: function (data) {
var stateOptions = "", stateId = 1;
for (var prop in data) {
if (data.hasOwnProperty(prop)) {
stateOptions += '<option value="' + stateId + '">' + prop + '</option>';
stateId++;
}
}
myData = data;
$("#state").html(stateOptions)
.bind('change', onStateChange)
.trigger('change');
}
});
});
获取关于我使用jQuery.data函数的第二个(城市)选择框的pincode
的访问权限,如果需要将一些附加信息与DOM元素相关联,我发现它非常实用。人们可以只保存pincode
值,但我使用该功能保存了有关城市的完整信息。
更新:我忘了提及您发布的JSON数据有错误。您应该在']'之前删除逗号。可能这只是将数据剪切和粘贴到问题文本中的问题。
答案 1 :(得分:0)
有很多方法。
全球变量选项。
var json_object = {
"Alaska" : {}
}; //and the rest of other text too lazy to type :)
$('#state').change(function(){
var state = $(this).val();
cities = json_object[state];
$('#city').html('');//remove the prev elements
for(item in cities){//same as foreach in php
$('<option value=""></option>').appendTo($('#city'));
}
});
我必须承认并不完整但却给你一个粗略的想法。
其他明智地使用像这样的ajax
$('#state').change(function(){
var url = 'ajax.php';//should return json with a list of cities only
var state = $('#state').val();
var data = {'state':state};
$.ajax({
url:url,
data:data,
dataType:'json',
success: function(items){
//do something with it
}
})
});
你唯一需要知道的是两者各有利弊。
第一个选项:只能触发一个请求,但会加载不需要的sh * t数据。 第二种选择:提出更多请求但数据更少