JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jQuery读取json文件,实现省市区/县(国标)三级联动

jQuery读取json文件,实现省市区/县(国标)三级联动

          最近做一个微信项目,需要用户填写所在的省市区/县,决定使用jQuery读取json文件来实现省市区/县的联动。
          其实很简单,jQuery文档也有详细解释:





代码如下:
html


  1. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  2.   <tr>
  3.     <td>
  4.        <!-- 暂无 ** 如需要可在city.json文件中添加-->
  5.       <select id="province" name="province" onchange="doProvAndCityRelation();">
  6.         <option id="choosePro" value="-1">请选择您所在省份</option>
  7.       </select>
  8.     </td>
  9.   </tr>
  10.   <tr>
  11.     <td>
  12.       <select id="citys" name="city" onchange="doCityAndCountyRelation();">
  13.         <option id='chooseCity' value='-1'>请选择您所在城市</option>
  14.       </select>
  15.     </td>
  16.   </tr>
  17.   <tr>
  18.     <td>
  19.       <select id="county" name="county">
  20.         <option id='chooseCounty' value='-1'>请选择您所在区/县</option>
  21.       </select>
  22.     </td>
  23.   </tr>
  24. </table>
复制代码js


  1. <script language="javascript">
  2.        var cityJson;
  3.             $(function(){
  4.                 //load city.json
  5.                 $.getJSON(
  6.                     "city.json",
  7.                     function(obj) {
  8.                         cityJson = obj;
  9.                         var sb = new StringBuffer();
  10.                         $.each(obj, function(i, val) {
  11.                             if(val.item_code.substr(2, 4) == '0000'){
  12.                                 sb.append("<option value='"+val.item_code+"'>"+val.item_name+"</option>");
  13.                             }
  14.                         });
  15.                         $("#choosePro").after(sb.toString());
  16.                     }
  17.                 );
  18.             });
  19.           // 省值变化时 处理市
  20.             function doProvAndCityRelation(){
  21.                 var city = $("#citys");
  22.                 var county = $("#county");
  23.                 if(city.children().length > 1){
  24.                     city.empty();
  25.                 }
  26.                 if(county.children().length > 1){
  27.                     county.empty();
  28.                 }
  29.                 if($("#chooseCity").length == 0){
  30.                     city.append("<option id='chooseCity' value='-1'>请选择您所在城市</option>");
  31.                 }
  32.                 if($("#chooseCounty").length == 0){
  33.                     county.append("<option id='chooseCounty' value='-1'>请选择您所在区/县</option>");
  34.                 }
  35.                 var sb = new StringBuffer();
  36.                 $.each(cityJson, function(i, val) {
  37.                     if(val.item_code.substr(0, 2) == $("#province").val().substr(0, 2) && val.item_code.substr(2, 4) != '0000' && val.item_code.substr(4, 2) == '00'){
  38.                         sb.append("<option value='"+val.item_code+"'>"+val.item_name+"</option>");
  39.                     }
  40.                 });
  41.                 $("#chooseCity").after(sb.toString());
  42.             }
  43.           // 市值变化时 处理区/县
  44.             function doCityAndCountyRelation(){
  45.                 var cityVal = $("#citys").val();
  46.                 var county = $("#county");
  47.                 if(county.children().length > 1){
  48.                     county.empty();
  49.                 }
  50.                 if($("#chooseCounty").length == 0){
  51.                     county.append("<option id='chooseCounty' value='-1'>请选择您所在区/县</option>");
  52.                 }
  53.                 var sb = new StringBuffer();
  54.                 $.each(cityJson, function(i, val) {
  55.                     if(cityVal=='110100' || cityVal=="120100" || cityVal=="310100" || cityVal=="500100"){
  56.                         if(val.item_code.substr(0, 3) == cityVal.substr(0, 3) && val.item_code.substr(4, 2) != '00'){
  57.                             sb.append("<option value='"+val.item_code+"'>"+val.item_name+"</option>");
  58.                         }
  59.                     }else{
  60.                         if(val.item_code.substr(0, 4) == cityVal.substr(0, 4) && val.item_code.substr(4, 2) != '00'){
  61.                             sb.append("<option value='"+val.item_code+"'>"+val.item_name+"</option>");
  62.                         }
  63.                     }
  64.                 });
  65.                 $("#chooseCounty").after(sb.toString());
  66.                
  67.             }
  68.             
  69.             function StringBuffer(str){   
  70.                 var arr = [];   
  71.                 str = str || "";
  72.                 var size = 0 ;  // 存放数组大小
  73.                 arr.push(str);
  74.                 // 追加字符串
  75.                 this.append = function(str1) {        
  76.                     arr.push(str1);        
  77.                     return this;   
  78.                 };
  79.                 // 返回字符串
  80.                 this.toString = function(){        
  81.                     return arr.join("");   
  82.                 };
  83.                 // 清空  
  84.                 this.clear = function(key){  
  85.                     size = 0 ;  
  86.                     arr = [] ;  
  87.                 }
  88.                 // 返回数组大小  
  89.                 this.size = function(){  
  90.                     return size ;  
  91.                 }
  92.                 // 返回数组  
  93.                 this.toArray = function(){  
  94.                     return buffer ;  
  95.                 }
  96.                 // 倒序返回字符串  
  97.                 this.doReverse = function(){  
  98.                     var str = buffer.join('') ;   
  99.                     str = str.split('');   
  100.                     return str.reverse().join('');  
  101.                 }
  102.             };
  103.         </script>
复制代码最后附上city.json文件


  1. [
  2. {"item_code":"110000","item_name":"北京市"},
  3. {"item_code":"120000","item_name":"天津市"},
  4. {"item_code":"130000","item_name":"河北省"},
  5. {"item_code":"140000","item_name":"山西省"},
复制代码

例子截图:


【jQuery读取json文件,实现省市区/县(国标)三级联动】相关文章

1. jQuery读取json文件,实现省市区/县(国标)三级联动

2. jQuery多级联动美化版Select下拉框

3. pdf.js – 利用HTML5技术读取PDF文件

4. jQuery文件夹管理插件 可删除文件夹

5. Telefónica与Mozilla开拓基于HTML5互联网设备

6. 基于jQuery美化联动下拉选择框

7. jQuery 1.7将HTML5引入IE6-8,实施弃用策略

8. jQuery 1.7将HTML5引入IE6-8,实施弃用策略

9. HTML5-WebSocket实现多文件同时上传

10. jQuery 浮动标签插件,帮助你提升表单用户体验

本文来源:https://www.51html5.com/a1340.html

点击展开全部

﹝jQuery读取json文件,实现省市区/县(国标)三级联动﹞相关内容

「jQuery读取json文件,实现省市区/县(国标)三级联动」相关专题

其它栏目

也许您还喜欢