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

2021-03-12 22:31

根据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;
});

二、有关API

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

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