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>