address模块是封装的一个省市区三级联动的功能,可以和form、layer等模块一样通过模块化引入进行使用。唯一的不同就是模块的存放路径和使用时的配置。下面将对此区别进行详细的描述。
模块加载名称:address
语法:layui.address()
layui.use('address', function(){
var layui.address();
});
上面说过,模块相对页面的存放路径不同,使用时也需要进行不同的配置。如果页面和此模块属于同级关系,则不用进行任何配置,直接引入即可使用。如果它们不属于同级关系,则需要通过查找address.js文件相对xx.js文件的相对路径进行配置,如:address.js文件与a文件夹属于同级,而a文件夹中包含b文件夹,b文件夹中包含xx.js,通过xx.js引入address模块则进行下面的配置
layui.config({
base : "../../js/" //如果a文件夹中直接就是xx.js文件,则为“../js/”
}).extend({
"address" : "address"
})
下面是HTML数据格式,其中select的name值和lay-filter值是固定不可改变的,因为模块中是通过查找对应name的select进行的赋值,通过form.on("select(filter)")执行选择的方法,所以这两个值是不可以随意更改的。如果需要改变请将模块源码中对应的值一同修改。另外需要注意的是“市”、“区/县”的select需要添加一个disabled属性,主要是为了避免在没有选择省份的情况下先选择市、区造成错误。
//省份select <select name="province" lay-filter="province"> <option value="">请选择省</option> </select> //市select <select name="city" lay-filter="city" disabled> <option value="">请选择市</option> </select> //区/县select <select name="area" lay-filter="area" disabled> <option value="">请选择县/区</option> </select>
其中code为地区id,用于给option赋值;name为地区名称,用于设置option的text;childs为当前区域的下级地区。
[{
"code": "11",
"name": "北京市",
"childs": [{
"code": "1101",
"name": "市辖区",
"childs": [{
"code": "110101",
"name": "东城区"
}]
}]
}]