来自 JSON 的连锁州城市下拉列表
Posted
技术标签:
【中文标题】来自 JSON 的连锁州城市下拉列表【英文标题】:Chained State city dropdown list from JSON 【发布时间】:2011-02-10 06:32:32 【问题描述】:我正在尝试填充链接的州城市选择下拉列表。我正在使用一个外部 json 文件来执行此操作,该文件由 State 及其对应的城市名称、id 和 pincode 组成。有人可以给我一些关于如何实现这一目标的想法。我需要根据州选择填充城市和密码值。提前谢谢...
JSON
"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" />
【问题讨论】:
【参考方案1】:我觉得你的问题很有趣,并写了相应的解决方案,你可以看到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
值,但我使用该功能保存了有关城市的完整信息。
已更新:我忘了提到您发布的 JSON 数据有错误。您应该删除 ']' 之前的逗号。可能这只是将数据剪切并粘贴到问题文本中的问题。
【讨论】:
如果 json 文件在用户到达州/城市选择页面之前就已经预渲染了,如果数据集很大,它是否会有一些性能滞后?? @Sullan:您应该在您的环境中测试性能。我不知道你说的是千字节还是千兆字节的数据。如果测试将显示性能问题,您可以在第一个 ajax 调用中仅加载状态列表并在下一个 ajax 调用中加载城市,而不是使用之前保存的myData
数组。
@Oleg 如果我想为州/省 id 添加一个参数,应该怎么办? json格式如下.. "stateid": "AB", "id": "1", "name": "Adak", "pincode": "xxx1" ,
@Sullan:抱歉,我不太明白你的意思。你能解释一下你需要什么吗?您是否需要更多 <select>
元素,例如 pincode
应该显示的附加元素?
@Sullan:在我看来,信息应该更像"Alaska": "stateid": "AB", "cities": ["id": "1", "name": "Adak", "pincode": "xxx1", "id": "2", "name": "Akhiok", "pincode": "xxx2" ,"id": "3", "name": "Akiak", "pincode": "xxx3" , ... ]
。在这种情况下,您可以将有关stateId
的第一个<select>
(“#state”)信息保存在<options>
的data
中。您可以完全按照我将信息保存到第二个 <select>
("#city") 的元素中的方式执行此操作。【参考方案2】:
有很多方法。
全局变量选项。
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
)
);
您唯一需要知道的是,两者各有优缺点。
第一个选项:只能触发一个请求,但会加载大量不需要的数据。 第二种选择:请求更多但数据更少
【讨论】:
以上是关于来自 JSON 的连锁州城市下拉列表的主要内容,如果未能解决你的问题,请参考以下文章