JSON的链州城市下拉列表 [英] Chained State city dropdown list from JSON
问题描述
我正在尝试填充链接的State City select下拉列表.我正在使用一个外部json文件来执行此操作,该文件由State及其对应的城市名称,ID和Pincode组成.有人可以给我一些关于如何实现这一点的想法.我需要根据州选择来填充城市和密码.预先感谢...
I am trying to populate a chained State City select dropdowns. I am using an external json file to do so, which consists of State and their corresponding city name, id and pincode. Can somebody gimme some idea on how to achieve this. I need to populate the city and pincode value based on the state selection. Thanks in advance...
{
"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" },
]
}
最终呈现的html
<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" />
推荐答案
我发现您的问题很有趣,并编写了相应的解决方案,您可以实时查看
I find your question interesting and wrote the corresponding solution which you can see live 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');
}
});
});
获得关于第二个(城市)选择框的pincode
的访问权限,我使用了 jQuery.data 函数,如果有人需要将一些其他信息与DOM元素相关联,我会发现它非常实用.只能以这种方式保存pincode
值,但是我使用了该功能来保存有关城市的完整信息.
to get access about the pincode
of the second (city) select box I used jQuery.data function which I find very practical if one need to associate some additional information with an DOM element. One could save only pincode
value in the way, but I used the function to save full information about the city.
更新:我忘了提到您发布的JSON数据有错误.您应在']'之前删除逗号.可能只是将数据剪切并粘贴到问题的文本中而已.
UPDATED: I forgot to mention that the JSON data which you posted has errors. You should remove commas before ']'. Probably it is just a problem with cut&paste of the data to the text of the question.
这篇关于JSON的链州城市下拉列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!