layui省市区三级联动
html:
<!--省市区联动三级联动-->
<div class="layui-form-item" id="area-picker">
<div class="layui-form-label">企业所在地</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="province_name" value="{{ $info->province_name ?? '' }}" class="province-selector" data-value="{{ $info->province_name ?? '' }}" lay-filter="province-1">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="city_name" value="{{ $info->city_name ?? '' }}" class="city-selector" data-value="{{ $info->city_name ?? '' }}" lay-filter="city-1">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width: 200px;">
<select name="area_name" value="{{ $info->area_name ?? '' }}" class="county-selector" data-value="{{ $info->area_name ?? '' }}" lay-filter="county-1">
<option value="">请选择区</option>
</select>
</div>
</div>
js:
<script>
//载入地区插件
layui.config(
{
base: '../content/lay/modules/'
,version: '1.0'
});
$(function () {
layui.use(['laypage', 'layer', 'tree', 'form','layarea'], function () {
var laypage = layui.laypage
, layer = layui.layer
, tree = layui.tree
, form = layui.form
var laydate = layui.laydate;//日期时间模块
var laypage = layui.laypage;//分页模块
var laytpl = layui.laytpl;
var layarea = layui.layarea;
//省市区三级联动
layarea.render({
elem:'#area-picker',
change:function (res) {
//选择结果
console.log(res)
}
})
</script>