省市县三级联动

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

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

相关文章

来自专栏IT派

Python爬虫框架Scrapy实战 - 抓取BOSS直聘招聘信息

参考翻译文档的安装教程:http://scrapy-chs.readthedocs.io/zh_CN/latest/intro/install.html

853
来自专栏wblearn

简书搜索自动匹配功能

今天周六,我又来分享知识啦。最近一直在忙项目,所以趁着这个周末,喝着咖啡,听着音乐,敲着代码就把做项目的知识点总结给大家,简直不要太惬意,哈哈。

451
来自专栏Google Dart

Flutter 构建完整应用手册-处理手势

我们不仅希望向用户展示信息,还希望我们的用户与我们的应用进行互动! 那么,我们如何回应基本操作,如点击和拖动? 我们将使用GestureDetector部件!

842
来自专栏阮一峰的网络日志

Firebug控制台详解

Firebug是网页开发的利器,能够极大地提升工作效率。 但是,它不太容易上手。我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法。今天,继续介绍它...

34012
来自专栏从流域到海域

《笨办法学Python》 第9课手记

《笨办法学Python》 第9课手记 这节课终于有一点新内容了,新内容也蛮容易理解的。 原代码如下: # Here's some new stuff, reme...

18210
来自专栏叁金大数据

自学Python七 爬虫实战一

  此文承接上文,让我们写一个简简单单的爬虫,循序而渐进不是吗?此次进行的练习是爬取前5页什么值得买网站中的白菜价包邮信息。包括名称,价格,推荐人,时间。

771
来自专栏向治洪

蘑菇街Android组件与插件化

插件化的基石 -- apk动态加载 随着我街业务的蓬勃发展,产品和运营随时上新功能新活动的需求越来越强烈,经常可以听到“有个功能我想周x上,行不行”。行么?...

19010
来自专栏君赏技术博客

我的个人代码规范文档

我说一下上面几个单词用到的地方,在除去NSString Block之外所有的对象应该声明为Strong

472
来自专栏前端大白专栏

一次性比较目前前端最流行的状态管理,mobx,vuex,redux-saga使用方式用方式

1973
来自专栏DannyHoo的专栏

问题——持续更新

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

582

扫描关注云+社区