省市县三级联动

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

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

相关文章

来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3735
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2797
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.5K7
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4435
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

5568
来自专栏杨龙飞前端

scrollto 到指定位置

2994
来自专栏魂祭心

原 canvas绘制clock

5214
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3358
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5318
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

8938

扫码关注云+社区