素材8网-专注前端素材！
来源：https://www.sucai8.cn/37313.html

强大的城市三级四级联动效果下载

  • 1257
  • 0
  • 0


  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);
复制代码
相关素材
强大的城市三级四级联动效果下载
  • 呜呜龙 刚刚下载了一个素材
  • 丹青不渝 刚刚下载了一个素材
  • 落叶飞刀2 刚刚下载了一个素材
  • qq值得cDd 刚刚下载了一个素材
  • 早点睡0208 刚刚下载了一个素材
  • momo2961 刚刚下载了一个素材
  • Rich 刚刚下载了一个素材
  • 霖尤 刚刚下载了一个素材
  • Azhan8com 刚刚下载了一个素材
  • qq甲WFm 刚刚下载了一个素材
  • qq阿呆URB 刚刚下载了一个素材
  • iptv 刚刚下载了一个素材
  • qqrpv 刚刚下载了一个素材
  • 此去今年花落无声 刚刚下载了一个素材
  • qq南辞tfQ 刚刚下载了一个素材
分享者：
分享者头像
xiaozhi
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题