前后端耦合下实现多级联动选择下拉框

环境

• 后端框架：SpringBoot
• 模板引擎：FreeMarker
• 前端框架：JQuery
• 前端 UI 组件：Layui

前端代码

• 容器中设定 class=”layui-form” 来标识一个 Layui 表单元素块。
• 放多个下拉框，第一个下拉框需要通过模板引擎循环渲染变量。
• lay-filter：过滤器，主要用于事件匹配。

<form class="layui-form custom-form">
    <div class="layui-form-item">
        <label class="layui-form-label">所属区域：</label>
        <div class="layui-input-inline">
            <select name="province" id="province" lay-filter="province">
                <option disabled selected value="">请选择省</option>
                <#list province! as item>
                <option value="${item.uuid}" >${item.name}</option>
                </#list>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="city" id="city" lay-filter="city">
                <option disabled selected value="">请选择市</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="county" id="county" lay-filter="county">
                <option disabled selected value="">请选择县</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="town" id="town" lay-filter="town">
                <option disabled selected value="">请选择镇</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="village" id="village" lay-filter="village">
                <option selected="selected" disabled="disabled" value="" >请选择村</option>
            </select>
        </div>
    </div>
</form>

• 使用 layui.form.on 监听事件，下拉选择框选中时触发事件，通过 ajax 请求下级的数据。

$(function () {
    layui.use(['jquery', 'form'], function () {
        let form = layui.form;
        form.on('select(province)', function (data) {
            selectRegion("#province", [
                {element: "#city", text: "请选择市"},
                {element: "#county", text: "请选择县"},
                {element: "#town", text: "请选择镇"},
                {element: "#village", text: "请选择村"},
            ], data, form);
        });
        form.on('select(city)', function (data) {
            selectRegion("#city", [
                {element: "#county", text: "请选择县"},
                {element: "#town", text: "请选择镇"},
                {element: "#village", text: "请选择村"},
            ], data, form);
        });
        form.on('select(county)', function (data) {
            selectRegion("#county", [
                {element: "#town", text: "请选择镇"},
                {element: "#village", text: "请选择村"},
            ], data, form);
        });
        form.on('select(town)', function (data) {
            selectRegion("#town", [
                {element: "#village", text: "请选择村"},
            ], data, form)
        });
    });
});

function selectRegion(element, childElements, data, form) {
    let regionId = data.value;
    $.ajax({
        url: "${request.contextPath}/select",
        type: "get",
        dataType: "json",
        data: {
            "regionId": regionId
        },
        success: function (data) {
            for (let i = 0; i < childElements.length; i++) {
                <!--清空下拉框中的缓存-->
                $(childElements[i].element).empty();
                <!--避免下拉框的值不变-->
                $(childElements[i].element).append('<option disabled selected value="">' + childElements[i].text + "</option>");
            }
            <!--使用循环解析后端传来的数据，并用使用js动态拼接html语言-->
            if (regionId !== "") {
                for (let i = 0; i < data.length; i++) {
                    $(childElements[0].element).append("<option value='" + data[i].uuid + "'>" + data[i].name + "</option>");
                }
            }
            form.render();
        }
    });
}

后端代码

• 获取子级数据接口。

/**
 * 跳转下拉页面
 *
 */
public ModelAndView index(ModelAndView modelAndView) {
    modelAndView.addObject("province", regionService.getRegionByParentId(""));
    modelAndView.setViewName("/selectPage");
    return modelAndView;
}
/**
 * 查询地区信息
 */
@GetMapping("/select")
public List<Object> getRegionByParentId(String regionId) {
    return regionService.getRegionByParentId(regionId);
}

• 查询当前 ID 下的子级数据。

SELECT
    uuid,
    pid,
    name
FROM
    region
WHERE
    pid = 'xx'