基于layui的省市区三级联动插件
链接: https://pan.baidu.com/s/12Pbf9tz2HYzW0KnlUsVotw 提取码: 5usu
在项目中需要做一些修改:将这个三级联动加入到一个增加的表单中,作为寄货地址和发货地址。
html:修改每一个name,和数据库中的地址名一致即可
<label class="layui-form-label">寄件地址</label> <!-- 寄件省市区 --> <div class="layui-row"> <div class="layui-col-md4"> <div class="layui-inline layui-select-default" style="width: 50%;"> <select name="experssSendAddressProvince" data-area="" lay-filter="experssSendAddressProvince"> <option value="">寄件省</option> </select> </div> </div> <div class="layui-col-md4"> <div class="layui-inline layui-select-default" style="width: 50%;"> <select name="experssSendAddressCity" data-area="" lay-filter="experssSendAddressCity"> <option value="">寄件市</option> </select> </div> </div> <div class="layui-col-md4"> <div class="layui-inline layui-select-default" style="width: 50%;"> <select name="experssSendAddressStation" data-area="" lay-filter="experssSendAddressStation"> <option value="">寄件区</option> </select> </div> </div> </div> <!-- 收件省市区 --> <label class="layui-form-label">收件地址</label> <div class="layui-row"> <div class="layui-col-md4"> <div class="layui-inline layui-select-default" style="width: 50%;"> <select name="experssHarvesAddressProvince" data-area="" lay-filter="experssHarvesAddressProvince"> <option value="">收件省</option> </select> </div> </div> <div class="layui-col-md4"> <div class="layui-inline layui-select-default" style="width: 50%;"> <select name="experssHarvesAddressCity" data-area="" lay-filter="experssHarvesAddressCity"> <option value="">收件市</option> </select> </div> </div> <div class="layui-col-md4"> <div class="layui-inline layui-select-default" style="width: 50%;"> <select name="experssHarvesAddressStation" data-area="" lay-filter="experssHarvesAddressStation"> <option value="">收件区</option> </select> </div> </div> </div>
js:需要调用common.js中封装好的方法:
bug1:在获取了省市区的邮编后,调用getcity()和getcity2()方法,将邮编转为省市区的中文名时,注意实参与方法里接收的数据类型要一致,Object object。否则没办法调用getCity();
解决1:以下三处的省市区的命名要一致即可
1.//获取发货邮编
var province = resData.experssSendAddressProvince;
var city = resData.experssSendAddressCity;
var district = resData.experssSendAddressStation;
2.//寄货方法getCity()
var address = common.getCity({province,city,district});
3.
getCity: function(address) {
//AreaData是地址传过来的json对象
//注意:address传来的是键值对格式的数据,要和这边的格式
//console.info(address);
//console.info(address.province);
var AreaData = $.rawCitiesData;
if("undefined" == typeof AreaData) {
layer.open({
title: '系统提示'
,content: '调用getCity之前请引入地址数据'
});
return;
}
var province = address.province,
city = address.city,
district = address.district,
provinceName = '',
cityName = '',
districtName = '';
bug2:若一个寄件地址,一个收货地址,二者调用一个方法getCity()会冲突,因为只需要调用两方法,所以创建一个一致的方法getCity2(),注意,方法名后有逗号!(否则会报奇怪的错)
真是有趣啊。