省市县三级联动

简介:

上次找到地区编码后,就测试省市县。网上找到例子感觉不是很合适,然后修改了下。

本来是从自己数据库查询,但做测试的话,在网上找到了一个地区编码的api,然后就是跨域问题。原来用ajax访问失败,getJSON可以,但getJson有同步问题,设置了全局参数也不管用,只好重复使用了。

复制代码
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>Insert title here</title>
  6 <script type="text/javascript" src="jquery-1.8.3.min.js" ></script>
  7 </head>
  8 <body>
  9  <div class="selectList">
 10         <select class="province" id="province">
 11             <option>请选择</option>
 12         </select>
 13         <select class="city" id="city">
 14             <option>请选择</option>
 15         </select>
 16         <select class="district" id="district">
 17             <option>请选择</option>
 18         </select>
 19         <input type='button' value='获取代码' onclick="getCode();"> </input>
 20     </div>
 21     <div class="selectList2">
 22         <select class="province">
 23             <option>请选择</option>
 24         </select>
 25         <select class="city">
 26             <option>请选择</option>
 27         </select>
 28         <select class="district">
 29             <option>请选择</option>
 30         </select>
 31     </div>
 32     <script type="text/javascript">
 33     function getCode(){
 34         console.log($('#province').val());
 35         console.log($('#city').val());
 36         console.log($('#district').val());
 37         alert($('#province').val()+$('#province').find("option:selected").text()
 38             +'\n'+$('#city').val()+$('#city').find("option:selected").text()
 39             +'\n'+$('#district').val()+$('#district').find("option:selected").text()
 40             );
 41     }
 42     
 43     function initMyArea(without_id,p,c,d){
 44          var oProvince = $('.'+without_id).find(".province");
 45          var oCity = $('.'+without_id).find(".city");
 46          var oDistrict = $('.'+without_id).find(".district");
 47          initProvince(p,c,d);
 48 
 49          function initProvince(pr,ci,di){
 50              // var options =getAreaData('000000');
 51              $.getJSON('http://api.dangqian.com/apidiqu2/api.asp?format=json&callback=?',{id:'000000000000'},function(data){
 52                  
 53                  var list = data.list;
 54                  var temp_html="<option value='0'>请选择</option>";    
 55                  $.each(list,function(name,value){
 56                      temp_html+="<option value='"+value.daima+"'>"+value.diming+"</option>";
 57                      
 58                  });
 59              
 60                  oProvince.html(temp_html);
 61                  if(pr!=undefined){
 62                      oProvince.val(pr);
 63                  }
 64                  changeProvince(ci,di);
 65 
 66                  });
 67              
 68              
 69          }
 70          
 71          //当省改变赋值市
 72         function changeProvince(ci,di){
 73              var n = oProvince.val();
 74              var pre=n.substring(0,2);
 75              if(pre==71 || pre ==81 || pre==82){
 76                  oDistrict.css("display","none");
 77                  oCity.css("display","none");
 78              }else{
 79                  oDistrict.css("display","inline");
 80                  oCity.css("display","line");
 81              }
 82              
 83              $.getJSON('http://api.dangqian.com/apidiqu2/api.asp?format=json&callback=?',{id:n},function(data){
 84                  
 85                  var list = data.list;
 86                  var temp_html="<option value='0'>请选择</option>";    
 87                  $.each(list,function(name,value){
 88                      temp_html+="<option value='"+value.daima+"'>"+value.diming+"</option>";
 89                      
 90                  });
 91              
 92                  oCity.html(temp_html);
 93                  if(ci!=undefined){
 94                      oCity.val(ci);
 95                  }
 96                  changeCity(di);
 97 
 98                  });
 99              
100          };
101          //当市改变赋值县
102          function changeCity(di){
103              var n = oCity.val();
104              /*var options =getAreaData(n);
105              oDistrict.html(options);
106              if(di!=undefined)
107                  oDistrict.val(di);*/
108              if(n=='0'){
109                  oDistrict.val(0);
110                  return;
111              }
112               $.getJSON('http://api.dangqian.com/apidiqu2/api.asp?format=json&callback=?',{id:n},function(data){
113              
114                  var list = data.list;
115                  var temp_html="<option value='0'>请选择</option>";    
116                  $.each(list,function(name,value){
117                      temp_html+="<option value='"+value.daima+"'>"+value.diming+"</option>";
118                      
119                  });
120              
121                  oDistrict.html(temp_html);
122                  if(di!=undefined){
123                      oDistrict.val(di);
124                  }
125                  
126 
127                  });
128          };
129          //选择省改变市
130          oProvince.change(function(){
131              changeProvince();
132          });
133          //选择市改变县
134          oCity.change(function(){
135              changeCity();
136          });
137          
138          
139          function getAreaData(code){
140              var temp_html = "<option value='0'>请选择</option>";                 
141              $.getJSON('http://api.dangqian.com/apidiqu2/api.asp?format=json&callback=?',function(data){
142                  console.log(data.list)
143                  var list = data.list;
144                  $.each(list,function(name,value){
145                      temp_html+="<option value='"+value.daima+"'>"+value.diming+"</option>";
146                      
147                  })
148 
149              });
150              
151             return temp_html;
152          }
153  
154     }
155     
156     $(document).ready(function(){
157         initMyArea('selectList','130000000000','130600000000','130622000000');
158         initMyArea('selectList2','210000000000','210500000000','210504000000');
159     });
160         
161         
162                
163     </script>
164 </body>
165 </html>
复制代码

 本文转自Ryan.Miao博客园博客,原文链接:http://www.cnblogs.com/woshimrf/p/4945865.html,如需转载请自行联系原作者

相关文章
|
JavaScript 前端开发 API
省市县三级联动
上次找到地区编码后,就测试省市县。网上找到例子感觉不是很合适,然后修改了下。 本来是从自己数据库查询,但做测试的话,在网上找到了一个地区编码的api,然后就是跨域问题。原来用ajax访问失败,getJSON可以,但getJson有同步问题,设置了全局参数也不管用,只好重复使用了。
1285 0
|
1月前
|
SQL 存储 前端开发
省市县三级联动的实现方案
省市县三级联动的实现方案
89 0
|
JavaScript 数据库 前端开发
|
1月前
|
JavaScript
省、市、区三级联动
省、市、区三级联动
|
定位技术
echart 全国地图 下钻省、市、区
echart 全国地图 下钻省、市、区
447 0
|
索引
三级联动---城市地区选择
三级联动---城市地区选择有关数据源指给出了部分,仅作参考,其中提供了北京和天津两组数据作为测试用。   示例展示:   选择城市选择区县选择地区             示例代码: 三级联动 ...
958 0
|
JSON 前端开发 数据格式
|
存储 Java 数据库
超简单方法实现省/市/地区级联查询
本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/48829517 未经博主允许不得转载。 博主地址是:http://blog.csdn.net/freewebsys 1,关于中国地址 开发业务的时候遇到一个问题 需要弄一个省、市,地区的级联查询。 页面好做,但是数据不太好弄,不好组织。 开始考虑
4574 0
|
定位技术 云计算 开发者

热门文章

最新文章