省市县三级联动

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

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

相关文章

来自专栏雨过天晴

Android Studio 多渠道打

1443
来自专栏c#开发者

Angularjs 通过asp.net web api认证登录

Angularjs 通过asp.net web api认证登录 Angularjs利用asp.net mvc提供的asp.net identity,member...

2777
来自专栏Hongten

Java Web 文件上传

 在我们的web开发中,很多的时候都需要把本机的一些文件上传到web服务器上面去

1363
来自专栏潇涧技术专栏

Head First Android Testing 2

Instrumentation Tests又叫Device or Emulator Tests,即运行在设备或者模拟器上的测试。使用AndroidJunitRu...

582
来自专栏逸鹏说道

9.数据库服务器部署之------3步实现远程访问

平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#iis 原文:htt...

3236
来自专栏黑白安全

PHP代码审计入门之路

虽然市面上的代码审计的文章已经一大把了,但是还是决定重复造轮子,打算作为一个系列来写的,近年越来越多的安全研究人员投入到php应用的漏洞挖掘,相对应的代码安全问...

672
来自专栏小樱的经验随笔

CTF---密码学入门第四题 困在栅栏里的凯撒

困在栅栏里的凯撒分值:10 来源: 北邮天枢战队 难度:易 参与人数:4531人 Get Flag:2124人 答题人数:2285人 解题通过率:93% 小...

2745
来自专栏deepcc

linux中nodejs后台运行工具forever

2778
来自专栏程序员的SOD蜜

.NET DLR 上的IronScheme 语言互操作&&IronScheme控制台输入中文的问题

前言 一直以来对Lisp语言怀有很崇敬的心里,《黑客与画家》对Lisp更是推崇备至,虽然看了不少有关Lisp的介绍但都没有机会去写段程序试试,就像我对C++一样...

2576
来自专栏木宛城主

PowerShell 获取Site Collection下被签出的文件

由于权限的设置,当文件被签出时导致别人不可见了,这对校验文件个数的人来说着实是件烦恼的事。幸好利用PowerShell,可以获取Site Collection下...

1827

扫码关注云+社区