<div class="container">
<span style="white-space:pre"> </span><select name="province" id="proSelector">
<option value="请选择省份">请选择省份</option>
</select>
<select name="city" id="citySelector">
<option value="请选择城市">请选择城市</option>
</select>
</div>
:
基本效果类似下图:
接下来为select框添加option: 为避免手动写入大段重复的html代码,我们采用js来实现option的增添,首先我们需要省份信息数据,以json格式数据为例,province.json,格式如下(由于数据太长,只粘贴部分作展示,完整版请参看源码):
[{
"ProID": 1,
"name": "北京市",
"ProSort": 1,
"ProRemark": "直辖市"
}, {
"ProID": 2,
"name": "天津市",
"ProSort": 2,
"ProRemark": "直辖市"
}, {
"ProID": 3,
"name": "河北省",
"ProSort": 5,
"ProRemark": "省份"
}]
然后通过js遍历json去为每个省份添加一个option:
$.get('../src/province.json', function(data) {
for (var i in data) {
$("#proSelector").append("<option value='"+data[i].name+"'>"+data[i].name+"</option>");
};
});
然后就能得到下图所示效果,省份数据已经添加: 左侧为省份选择器,用户可以切换选择的省份信息:
接下来为右侧select动态添加城市: 首先我们得知道当前用户选择的省份信息,一句话搞定:
var selectedPro = $("#proSelector").val();
然后我们需要一份全国城市的数据,仍然以json格式数据为例city.json(由于数据太长,只粘贴部分作展示,完整版请参看源码):
[{
"CityID": 1,
"name": "北京市",
"ProID": 1,
"CitySort": 1
}, {
"CityID": 2,
"name": "天津市",
"ProID": 2,
"CitySort": 2
}, {
"CityID": 3,
"name": "上海市",
"ProID": 9,
"CitySort": 3
}]
遍历城市信息,从中提取当前所选省份拥有哪些城市,我们可以通过ProID去寻找,所以我们首先从province.json中获取这个ID:
function getProID(proName, cb) {
var proID = null;
$.get('../src/province.json', function(data) {
for (var i in data) {
if(proName == data[i].name){
proID = data[i].ProID;
cb(proID);
};
};
});
}
然后用这个proID去city.json中匹配城市信息,并将匹配的城市append到城市选择器的option中,可以将其定义为一个函数updateCity():
getProID(selectedPro, function(proID) {
$.get('../src/city.json', function(data) {
for (var i in data) {
if(data[i].ProID == proID) {
$('#citySelector').append("<option value='"+<span style="font-family: Arial, Helvetica, sans-serif;">data[i].name</span>+"'>"+<span style="font-family: Arial, Helvetica, sans-serif;">data[i].name</span>+"</option>");
}
};
});
})
然后为城市动态更新绑定一个事件,选取省份选择器的change事件作为触发:
$('#proSelector').change(function(event) {
<span style="white-space:pre"> </span>updateCity();
})
然后就能得到我们想要的效果: 右侧则为对应的城市选择器:
当用户切换选择的省份时,右侧选择框中的城市信息也会相应更新: