省市县三级联动

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

本来是从自己数据库查询,但做测试的话,在网上找到了一个地区编码的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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏后端技术探索

nginx 502错误原因和解决办法总结

一、NGINX 502错误排查 NGINX 502 Bad Gateway错误是FastCGI有问题,造成NGINX 502错误的可能性比较多。将网上找到的一些...

2022
来自专栏技术小黑屋

Android中HTTP相关的API

Android中大多数应用都会发送和接受HTTP请求,在Android API中主要由两个HTTP请求的相关类,一个是HttpURLConnection,另一个...

2393
来自专栏Maroon1105

Linode Cloud中的大数据:使用Apache Storm进行流数据处理

Apache Storm是一项大数据技术,使软件,数据和基础架构工程师能够实时处理高速,大容量数据并提取有用信息。任何涉及实时处理高速数据流的项目都可以从中受益...

1772
来自专栏小詹同学

如何获取临时 IP 进行爬虫学习 ?

自己在家里学习爬虫的时候 ,遇到封 IP 怎么办呢 ?网上买 IP 又贵 ,用免费代理质量又不好 。其实 ,家中自用的宽带如果可以进行拨号的话 ,我们是可以直接...

1644
来自专栏魏艾斯博客www.vpsss.net

解决 Winscp 不显示隐藏文件的办法

平时魏艾斯博客使用 Winscp 当做 SFTP 工具, 我们也经常遇到要修改.htaccess 和.user.ini 等等用.开头或者其他特殊扩展名文件,在 ...

4619
来自专栏恰童鞋骚年

.NET Core微服务之基于Ocelot实现API网关服务

  API 网关一般放到微服务的最前端,并且要让API 网关变成由应用所发起的每个请求的入口。这样就可以明显的简化客户端实现和微服务应用程序之间的沟通方式。以前...

1493
来自专栏Android知识点总结

2--安卓网络编程之http协议简介+小案例引入

你也可以请求一下百度的服务器,可以看出是返回了一个Html的源码,浏览器便是解析这份源码,渲染成视图展现出来的。

1503
来自专栏后端技术探索

nginx 502错误原因和解决办法总结

一、NGINX 502错误排查 NGINX 502 Bad Gateway错误是FastCGI有问题,造成NGINX 502错误的可能性比较多。将网上找到的一些...

5102
来自专栏FreeBuf

解包分析攻击越南机场和其它组织机构的间谍程序

根据我们接触到了前期入侵越南组织机构的间谍程序捕获样本,入侵活动涉及7月底对越南两大机场的攻击事件,攻击中使用的恶意软件用于窃取越南航空公司40万会员信息。 这...

2378
来自专栏一个会写诗的程序员的博客

Backbone.js 简介

Backbone.js提供模型(models)、集合(collections)、视图(views)结构。

1313

扫码关注云+社区

领取腾讯云代金券