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="width: 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="width: 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="width: 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="width: 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.效果：