您的位置: 首页  >  文章  >  javascript实现两个select选择框内容动态绑定

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

分类: 文章 • 2022-10-06 20:02:15

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>  

：

基本效果类似下图：

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


接下来为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. });  

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

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

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


接下来为右侧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. })  

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

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

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


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

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


Github: 动态更新select选项

相关推荐