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

1. 有时候需要实现当用户选择一个选项之后，网页上另一部分的内容就随之变化，达到动态更新的目的，这时候我们就会想到ajax来实现局部刷新，接下来用一个简单的例子演示：总共有两个select选择框，第一个是省份的选择，第二个是对应省份的城市的选择，目标是实现当用户切换省份的时候，城市选择框中的选项全部替换为对应省份的城市：

对应的html代码，主体就是两个选择框

[html]  view plain  copy

1. <div class="container">  
2. <span style="white-space:pre">    </span><select name="province" id="proSelector">  
3.         <option value="请选择省份">请选择省份</option>  
4.     </select>  
5.   
6.     <select name="city"  id="citySelector">  
7.         <option value="请选择城市">请选择城市</option>  
8.     </select>  
9. </div>  

：

基本效果类似下图：

接下来为select框添加option：

为避免手动写入大段重复的html代码，我们采用js来实现option的增添，首先我们需要省份信息数据，以json格式数据为例，province.json，格式如下（由于数据太长，只粘贴部分作展示，完整版请参看源码）：

[html]  view plain  copy

1. [{  
2.     "ProID": 1,  
3.     "name": "北京市",  
4.     "ProSort": 1,  
5.     "ProRemark": "直辖市"  
6. }, {  
7.     "ProID": 2,  
8.     "name": "天津市",  
9.     "ProSort": 2,  
10.     "ProRemark": "直辖市"  
11. }, {  
12.     "ProID": 3,  
13.     "name": "河北省",  
14.     "ProSort": 5,  
15.     "ProRemark": "省份"  
16. }]  

然后通过js遍历json去为每个省份添加一个option：

[html]  view plain  copy

1. $.get('../src/province.json', function(data) {  
2.     for (var i in data) {  
3.         $("#proSelector").append("<option value='"+data[i].name+"'>"+data[i].name+"</option>");  
4.     };  
5. });  

然后就能得到下图所示效果，省份数据已经添加：

左侧为省份选择器，用户可以切换选择的省份信息：

接下来为右侧select动态添加城市：

首先我们得知道当前用户选择的省份信息，一句话搞定：

[html]  view plain  copy

1. var selectedPro = $("#proSelector").val();  

然后我们需要一份全国城市的数据，仍然以json格式数据为例city.json（由于数据太长，只粘贴部分作展示，完整版请参看源码）：

[html]  view plain  copy

1. [{  
2.     "CityID": 1,  
3.     "name": "北京市",  
4.     "ProID": 1,  
5.     "CitySort": 1  
6. }, {  
7.     "CityID": 2,  
8.     "name": "天津市",  
9.     "ProID": 2,  
10.     "CitySort": 2  
11. }, {  
12.     "CityID": 3,  
13.     "name": "上海市",  
14.     "ProID": 9,  
15.     "CitySort": 3  
16. }]  

遍历城市信息，从中提取当前所选省份拥有哪些城市，我们可以通过ProID去寻找，所以我们首先从province.json中获取这个ID：

[html]  view plain  copy

1. function getProID(proName, cb) {  
2.     var proID = null;  
3.     $.get('../src/province.json', function(data) {  
4.         for (var i in data) {  
5.             if(proName == data[i].name){  
6.                 proID = data[i].ProID;  
7.                 cb(proID);  
8.             };  
9.         };  
10.     });  
11. }  

然后用这个proID去city.json中匹配城市信息，并将匹配的城市append到城市选择器的option中，可以将其定义为一个函数updateCity()：

[html]  view plain  copy

1. getProID(selectedPro, function(proID) {  
2.     $.get('../src/city.json', function(data) {  
3.         for (var i in data) {  
4.             if(data[i].ProID == proID) {  
5.                 $('#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>");  
6.             }  
7.         };  
8.     });  
9. })  

然后为城市动态更新绑定一个事件，选取省份选择器的change事件作为触发：

[html]  view plain  copy

1. $('#proSelector').change(function(event) {  
2. <span style="white-space:pre">    </span>updateCity();  
3. })  

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

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

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

Github: 动态更新select选项