javascript实现两个select选择框内容动态绑定

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();

然后我们需要一份全国城市的数据，仍然以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();
})

然后就能得到我们想要的效果：

右侧则为对应的城市选择器：



当用户切换选择的省份时，右侧选择框中的城市信息也会相应更新：



Github:
动态更新select选项