Layui實現三級聯動

使用 layarea下拉選擇器，實現三級聯動，方便有效。

1，頁面

使用三級聯動，需要一個父級標簽包裹，給每個 select 分別設置為 province-selector，city-selector，county-selector，這里使用了 類選擇器，用區分標簽內容，也可以使用 lay-filter進行區分。

select 的 data-value設置默認值，

div class="layui-form">
    <div class="layui-form-item" id="area-picker">
        <form class="layui-form">
            <div class="layui-form-label">選擇地址</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province" class="province-selector" data-value="廣東省" lay-filter="province">
                    <option value="">請選擇省</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city" class="city-selector" data-value="深圳市" lay-filter="city">
                    <option value="">請選擇市</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="county" class="county-selector" data-value="龍崗區" lay-filter="county">
                    <option value="">請選擇區</option>
                </select>
            </div>
        </form>
    </div>
</div>

 

2，js代碼

需要下載layarea插件，

 

<script>
    
    //配置插件目錄  配置數據的/mods/layarea.js
    layui.config({
        base: '/mods/'  
        , version: '1.0' 
    });
    // layui.use加載模塊
    layui.use(['layer', 'form', 'layarea'], function () {
        var layer = layui.layer
            , form = layui.form
            , layarea = layui.layarea;

        //使用模塊對象
        layarea.render({
            elem: '.layui-form',//獲得包含三級聯動的form的class
            // change: function (res) {
            //     //選擇結果
            //     console.log(res);
            // }
        });
    });
</script>