公众账号

微信公众号二维码 微信扫描关注
来源:http://www.htmlsucai.com/thread-37313-1-1.html

[表单代码] 强大的城市三级四级联动效果下载

403 [禁止匿名转载 禁止商业使用]
发表于 2017-6-16 20:50:17 | 显示全部楼层 |阅读模式
强大的城市三级四级联动效果下载.jpg

  1. 通过地区编码初始化设置
  2. $('#demo').citys({code:350206});
复制代码
  1. 通过地区名称初始化设置,并且下拉框值为地区名称
  2. $('#demo1').citys({valueType:'name',province:'福建',city:'厦门',area:'思明'});
复制代码
  1. 事件处理
  2. $('#demo2').citys({
  3.     required:false,
  4.     nodata:'disabled',
  5.     onChange:function(data){
  6.         var text = data['direct']?'(直辖市)':'';
  7.         $('#place').text('当前选中地区:'+data['province']+text+' '+data['city']+' '+data['area']);
  8.     }
  9. });
复制代码
  1. 扩展显示行政区划第四级(街道)信息:
  2.     var $town = $('#demo3 select[name="town"]');
  3.     var townFormat = function(info){
  4.     $town.hide().empty();
  5.     if(info['code']%1e4&&info['code']<7e6){        //是否为“区”且不是港澳台地区
  6.             $.ajax({
  7.                     url:'http://passer-by.com/data_location/town/'+info['code']+'.json',
  8.                     dataType:'json',
  9.                     success:function(town){
  10.                             $town.show();
  11.                             for(i in town){
  12.                                             $town.append('<option value="'+i+'">'+town[i]+'</option>');
  13.                             }
  14.                     }
  15.             });
  16.     }
  17.     };
  18.     $('#demo3').citys({
  19.         province:'福建',
  20.         city:'厦门',
  21.         area:'思明',
  22.         onChange:function(info){
  23.                 townFormat(info);
  24.         }
  25.     },function(api){
  26.         var info = api.getInfo();
  27.         townFormat(info);
  28.     });
复制代码
  1. 调用方法:
  2. $(selector).citys(options,callback);
复制代码
QQ截图20170616205321.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

最新素材
HTML素材网,HTML5模板,网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2017  HTML素材网  Powered by 智伙伴科技
  
返回顶部返回顶部
发布主题