layui的省市县三级联动

1.下载layui第三方组件layarea.js。直达链接：https://fly.layui.com/extend/layarea/

　并放入以下位置。

    

2.layui.js中进行以下增加。
　　

3.HTML：

<div class="layui-form-item" id="area-picker">
                            <label class="layui-form-label">违法地点</label>
                            <div class="layui-input-inline" style=" 16%; margin-left: 10px">
                                <select name="province" class="province-selector" data-value="" lay-filter="province-1">
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style=" 16%; margin-left: 0;">
                                <select name="city" class="city-selector" data-value="" lay-filter="city-1">
                                    <option value="">请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style=" 15%; margin-left: 0;">
                                <select name="county" class="county-selector" data-value="" lay-filter="county-1">
                                    <option value="">请选择区</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style=" 41%; margin: 0;">
                                <input type="text" class="layui-input" name="detailedAddress" id="detailedAddress" placeholder="请输入详细地址" autocomplete="off">
                            </div>
                        </div>

4.JS：

<script src="../../layui/layui.js"></script>

layui.use(['layer', 'layarea'], function() {
    var layer = layui.layer,
         layarea = layui.layarea;

    layarea.render({
            elem: '#area-picker',
            data: {
                province: '湖南省',
                city: '长沙市',
                county: '雨花区',
            },
            change: function (res) {
                //选择结果
                console.log(res);
            }
     });
})

5.效果：