第一步:引入layui和jquery
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
第二步:HTML代码
<div class="layui-form">
<div class="layui-form-item" id="area-picker">
<div class="layui-form-label">网点地址</div>
<div class="layui-input-inline" style="width: 200px;">
<select id="province" name="province" class="province-selector" data-value="广东省"
lay-filter="province-1">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select id="city" name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select id="county" name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
<option value="">请选择区</option>
</select>
</div>
</div>
</div>
第三步:JS代码
<script>
//配置插件目录
layui.config({
base: './mods/', //layui省市区三级联动, 需要引入配置文件,根据自己引入的地址更改
version: '1.0'
});
//一般直接写在一个js文件中
layui.use(['layer', 'form', 'layarea'], function () {
var layer = layui.layer,
form = layui.form,
layarea = layui.layarea;
//编辑时返显,将‘河南省’,'郑州市','金水区'换成从后台拿的地址就行
$('#province').attr("data-value", '河南省');
$('#city').attr("data-value", '郑州市');
$('#county').attr("data-value", '金水区');
layarea.render({
elem: '#area-picker',
change: function (res) {
//选择结果
console.log(res);
}
});
});
</script>
- 注意:一定要引入layui省市区地址的配置文件
- 点我获取案例及配置文件(不含编辑时返显)