在 Thymeleaf 与 Bootstrap 组合的后台管理项目中，经常需要根据用户在下拉框中的选择，弹出不同业务内容的模态框。例如选择“新增用户”就弹新增表单，选择“导入数据”就弹文件上传框。如果为每个选项都单独写一个隐藏的模态框，页面会变得臃肿，而且后端数据难以统一传递。
一、基本页面结构与下拉渲染
我们首先在 Thymeleaf 模板中使用 th:each 将后端传来的操作类型列表渲染成下拉选项。这样下拉内容由后端模型驱动，后续新增类型只需改后台数据。
在页面中只需保留一个 Bootstrap 模态框容器，它的标题与主体区域由 JavaScript 根据下拉值动态填充，而不是写死多个 div。这种做法降低了 DOM 节点数量，也方便统一控制显示逻辑。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" href="https://ipipp.com/css/bootstrap.min.css">
</head>
<body>
<select id="actionSelect" class="form-control">
<option value="">请选择操作</option>
<option th:each="item : ${actions}" th:value="${item.code}" th:text="${item.name}"></option>
</select>
<div class="modal fade" id="actionModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle"></h5>
</div>
<div class="modal-body" id="modalBody"></div>
</div>
</div>
</div>
<script src="https://ipipp.com/js/bootstrap.bundle.min.js"></script>
<script src="https://ipipp.com/js/app.js"></script>
</body>
</html>
二、JavaScript 动态控制显示
核心逻辑是监听下拉框的 change 事件。当值发生变化时，先根据值匹配预设的内容模板，再填入模态框，最后调用 Bootstrap 的 modal('show') 方法。注意 Bootstrap 5 与 4 的调用方式一致，都是基于 DOM 元素实例。
为了避免用户未选择有效项就打开空弹窗，我们在函数开头做判断：若值为空直接返回。另外，每次打开前重置内容，可以防止上一次的数据残留导致误会。
// app.js
const contentMap = {
add: '<form><input class="form-control" placeholder="用户名"></form>',
import: '<input type="file" class="form-control">'
};
document.getElementById('actionSelect').addEventListener('change', function () {
const val = this.value;
if (!val) {
return;
}
const title = this.options[this.selectedIndex].text;
document.getElementById('modalTitle').innerText = title;
document.getElementById('modalBody').innerHTML = contentMap[val] || '暂无内容';
const modalEl = document.getElementById('actionModal');
const modal = new bootstrap.Modal(modalEl);
modal.show();
});
三、后端 Thymeleaf 数据准备
在 Spring Boot 控制器中，我们向模型放入一个包含 code 与 name 的列表。Thymeleaf 在渲染时将其转为 option，前端 JS 通过 code 映射内容。这样业务文案与结构分离，运营调整弹窗类型不需要动前端代码。
如果某些弹窗内容复杂，也可以由后端直接生成 HTML 片段放入 Map，但需注意转义，防止 XSS。简单场景更推荐前端用 JS 模板维护，便于联调。
@GetMapping("/page")
public String page(Model model) {
List<Action> actions = Arrays.asList(
new Action("add", "新增用户"),
new Action("import", "导入数据")
);
model.addAttribute("actions", actions);
return "demo";
}
四、常见误区与优化建议
一个典型错误是在 Thymeleaf 里用 th:if 写多个模态框，再根据下拉切换显示。这会让页面在初始化时加载所有隐藏 DOM，浪费资源且容易 ID 冲突。统一一个模态框加 JS 控制是更清晰的方案。
另一个坑是直接在 change 里写 $('#actionModal').modal('show') 却忘了引 Bootstrap JS，导致无任何反应。排查时应先确认 bootstrap 全局对象存在，再检查元素 ID 是否匹配。
| 方案 | 优点 | 缺点 |
|---|---|---|
| 多模态框写死 | 结构直观 | 冗余、难维护 |
| 单模态框加 JS | 轻量、灵活 | 需写少量脚本 |
通过上述方式，Thymeleaf 负责把下拉数据送到页面，Bootstrap 提供弹窗能力，JS 做桥梁，整体实现简单且易扩展。
ThymeleafBootstrap_modaldropdown修改时间：2026-08-04 19:33:26