Layui Select四级联动效果触发

吴笙°

于 2020-12-20 16:01:45 发布

阅读量517

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44171391/article/details/111438228

版权

刚入行三个月小白，写的不好请大佬指教！

前端页面

 		   <div class="div-left">
                <span class=" layui-form-label typeface">省</span>
                <select id="province" name="provinceId" class="province-selector" lay-filter="province"
                        lay-verify="required" lay-search>
                    <option value=''>请选择省/自治区</option>
                </select>
            </div>
            <div class="div-left">
                <span class=" layui-form-label typeface">市</span>
                <select id="city" name="cityId" class="city-selector" lay-filter="city" lay-verify="required"
                        lay-search>
                    <option value=''>请选择市/县</option>
                </select>
            </div>
            <div class="div-right">
                <span class=" layui-form-label typeface">县（区）</span>
                <select id="area" name="areaId" class="county-selector" lay-filter="area" lay-verify="required"
                        lay-search>
                    <option value=''>请选择镇区</option>
                </select>
            </div>
            <div class="div-head">
                <span class="typeface" style="margin-top: -10px;"></span>
            </div>
            <div class="div-left">
                <span class=" layui-form-label typeface">乡镇（街道）</span>
                <select id="street" name="streetId" class="county-selector" lay-filter="street" lay-verify="required"
                        lay-search>
                    <option value=''>请选择街道</option>
                </select>
            </div>

js部分

//监听省、市、县下拉框 发生变化时调用接口获取下面的内容并渲染
 form.on('select(province)', function (data) {
        $("#city").html("<option value=''>请选择市/县</option>");
        $("#area").html("<option value=''>请选择镇区</option>");
        $("#street").html("<option value=''>请选择街道</option>");
        if (data.value != "") {
            config.get_ajax(url, {
                async: false,
                data: {pid: data.value},
                success: function (res) {
                    if (res.code === 200) {
                        var data = res.data;
                        for (var k in data) {
                            var kv = data[k];
                            $("#city").append("<option value='" + kv.id + "'>" + kv.regionName + "</option>");
                        }
                    }
                }
            }, url);
        }

        form.render("select");
    });

    form.on('select(city)', function (data) {
        $("#area").html("<option value=''>请选择镇区</option>");
        $("#street").html("<option value=''>请选择街道</option>");
        if (data.value != "") {
            config.get_ajax(url, {
                async: false,
                data: {pid: data.value},
                success: function (res) {
                    if (res.code === 200) {
                        var data = res.data;
                        for (var k in data) {
                            var kv = data[k];
                            $("#area").append("<option value='" + kv.id + "'>" + kv.regionName + "</option>");
                        }
                    }
                }
            }, url);
        }
        form.render("select");
    })

    form.on('select(area)', function (data) {
        $("#street").html("<option value=''>请选择街道</option>");
        if (data.value != "") {
            config.get_ajax(url, {
                async: false,
                data: {pid: data.value},
                success: function (res) {
                    if (res.code === 200) {
                        var data = res.data;
                        for (var k in data) {
                            var kv = data[k];
                            $("#street").append("<option value='" + kv.id + "'>" + kv.regionName + "</option>");
                        }
                    }
                }
            }, url);
        }
        form.render("select");
    })

初始化部分默认显示浙江省杭州市上城区清波街道

function initProvince() {
        config.get_ajax(url, {
            async: false,
            data: {pid: 0},
            success: function (res) {
                if (res.code === 200) {
                    var data = res.data;
                    for (var k in data) {
                        var kv = data[k];
                        $("#province").append("<option value='" + kv.id + "'>" + kv.regionName + "</option>");
                    }
                    form.render("select");
                    if (!oca_person_id) {
                        initNativePlace('330000', '330100', '330102', '330102001');
                    }
                }
            }
        }, url);
    }

模拟点击select框并触发条件

 function initNativePlace(provinceId, cityId, areaId, streetId) {
        $('select[name="provinceId"]').next().find('.layui-select-title input').click();
        setTimeout(function () {
            $('select[name="provinceId"]').next().find('.layui-anim').children('dd[lay-value="' + provinceId + '"]').click();
        }, 100);

        $('select[name="cityId"]').next().find('.layui-select-title input').click();
        setTimeout(function () {
            $('select[name="cityId"]').next().find('.layui-anim').children('dd[lay-value="' + cityId + '"]').click();
        }, 200);

        $('select[name="areaId"]').next().find('.layui-select-title input').click();
        setTimeout(function () {
            $('select[name="areaId"]').next().find('.layui-anim').children('dd[lay-value="' + areaId + '"]').click();
        }, 300);

        $('select[name="streetId"]').next().find('.layui-select-title input').click();
        setTimeout(function () {
            $('select[name="streetId"]').next().find('.layui-anim').children('dd[lay-value="' + streetId + '"]').click();
        }, 400);

        form.render("select");
    }