layui三联级动详细地址(省份区)往下拉框完成编

摘要: 根据layui封裝了一个详细地址挑选器,详细地址数据信息选用weui的city-mon里边,因此该common只抽出showCity和getCity方式。1. html书写name和lay-filter务必维持统一,data-area是详细地址默认设置值...

根据layui封裝了一个详细地址挑选器,详细地址数据信息选用weui的city-mon里边,
因此该common只抽出showCity和getCity方式。

1. html书写

name和lay-filter务必维持统一,data-area是详细地址默认设置值

 select name= province data-area= 广东省省 lay-filter= province option value= 挑选省 /option /select 
 select name= city data-area= 广州市市 lay-filter= city option value= 挑选市 /option /select 
 select name= district data-area= 广州天河区 lay-filter= district option value= 挑选区 /option /select 
 h3 2. 需引进city-picker.js详细地址数据信息文档 /h3 
 script type= text/javascript src= js/city-picker.js /script 

假如未引进,则会提醒未引入详细地址数据信息

3. mon控制模块
//config的设定是全局性的
layui.config({
 base: js/ //假定它是你储放扩展控制模块的网站根目录
}).extend({ //设置控制模块别称
 common: common //假如 common.js 是在网站根目录,还可以无需设置别称
});
4. 应用控制模块
layui.use([ form , common ], function(){
 mon = mon,
 form = layui.form;
 //三级详细地址连动
 common.showCity( province , city , district 
 //监视递交
 form.on( submit(formDemo) , function(data){
 var resData = data.field,
 province = resData.province,
 city = resData.city,
 district = resData.district;
 console.log(province, city, district) // 440
 // 根据详细地址code码获得详细地址名字
 var address = common.getCity({
 province,
 city,
 district
 console.log(address); // {provinceName: 广东省省 , cityName: 广州市市 , districtName: 广州天河区 }
 return false;
});

layui三级联动地址(省市区)下拉框实现代码

二、有关API

common有2个方式, showCity用于载入详细地址挑选器, getCity用于由详细地址code码获得详细地址名字。

小超越工作室 是您的信赖,要我们能一直坚持不懈初衷! 致力于于为湛江市各种中小型型公司出示高品质量企业网站建设及SEO提升服务



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:一键抠图