1. 有时候需要实现当用户选择一个选项之后,网页上另一部分的内容就随之变化,达到动态更新的目的,这时候我们就会想到ajax来实现局部刷新,接下来用一个简单的例子演示:总共有两个select选择框,第一个是省份的选择,第二个是对应省份的城市的选择,目标是实现当用户切换省份的时候,城市选择框中的选项全部替换为对应省份的城市:
对应的html代码,主体就是两个选择框
<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();
[{
"CityID": 1,
"name": "北京市",
"ProID": 1,
"CitySort": 1
}, {
"CityID": 2,
"name": "天津市",
"ProID": 2,
"CitySort": 2
}, {
"CityID": 3,
"name": "上海市",
"ProID": 9,
"CitySort": 3
}]
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();
})
然后就能得到我们想要的效果:
右侧则为对应的城市选择器:
当用户切换选择的省份时,右侧选择框中的城市信息也会相应更新:
Github: 动态更新select选项