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

环境

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

前端代码

  • 容器中设定 class=”layui-form” 来标识一个 Layui 表单元素块。
  • 放多个下拉框,第一个下拉框需要通过模板引擎循环渲染变量。
  • lay-filter:过滤器,主要用于事件匹配。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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 请求下级的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
$(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();
}
});
}

后端代码

  • 获取子级数据接口。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* 跳转下拉页面
*
*/
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 下的子级数据。
1
2
3
4
5
6
7
8
SELECT
uuid,
pid,
name
FROM
region
WHERE
pid = 'xx'

前后端耦合下实现多级联动选择下拉框
http://www.loquy.cn/9c06e8ab.html
作者
loquy
发布于
2022年6月29日
许可协议