<think>我们
使用Thymeleaf模板引擎在Spring Boot中实现下拉选择框（select）功能。主要步骤包括：
1. 后端准备数据：在控制器中准备下拉框的选项数据（如List或Map）并添加到Model。
2. 前端
使用Thymeleaf渲染：在HTML中
使用`th:each`遍历选项，并用`th:selected`设置默认选中。
下面以省市联动下拉框为例（参考引用[4]），分为两个下拉框：省份和城市。当选择省份时，城市下拉框动态更新（这里先实现静态版本，动态联动需要JavaScript，但问题未要求，故先做静态）。
### 步骤1：创建实体类（Province和City）
```java
// Province.java
public class Province {
private Integer id;
private String name;
// 省略构造方法、getter和setter
}
// City.java
public class City {
private Integer id;
private String name;
private Integer provinceId; // 关联省份ID
// 省略构造方法、getter和setter
}
```
### 步骤2：创建服务层（Service）和数据访问层（Dao）
这里为了简化，我们
使用模拟数据，不连接
数据库（参考引用[4]中的服务层结构）。
**ProvinceService.java**
```java
@Service
public class ProvinceService {
public List<Province> getAllProvinces() {
// 模拟数据
List<Province> provinces = new ArrayList<>();
provinces.add(new Province(1, "广东省"));
provinces.add(new Province(2, "湖南省"));
return provinces;
}
}
```
**CityService.java**
```java
@Service
public class CityService {
public List<City> getCitiesByProvinceId(Integer provinceId) {
List<City> cities = new ArrayList<>();
if (provinceId == 1) {
cities.add(new City(1, "广州市", 1));
cities.add(new City(2, "深圳市", 1));
} else if (provinceId == 2) {
cities.add(new City(3, "长沙市", 2));
cities.add(new City(4, "株洲市", 2));
}
return cities;
}
}
```
### 步骤3：控制器（Controller）准备数据
```java
@Controller
public class FormController {
@Autowired
private ProvinceService provinceService;
@Autowired
private CityService cityService;
@GetMapping("/form")
public String showForm(Model model) {
// 获取所有省份
List<Province> provinces = provinceService.getAllProvinces();
model.addAttribute("provinces", provinces);
// 假设默认选中第一个省份，并获取其城市
List<City> cities = Collections.emptyList();
if (!provinces.isEmpty()) {
cities = cityService.getCitiesByProvinceId(provinces.get(0).getId());
}
model.addAttribute("cities", cities);
return "form"; // 对应templates/form.html
}
}
```
### 步骤4：
Thymeleaf模板（form.html）渲染下拉框
```html
<!DOCTYPE html>
<html xmlns:th="http://www.
thymeleaf.org">
<head>
<title>下拉选择框示例</title>
</head>
<body>
<form>
<label>省份：</label>
<select name="province" id="provinceSelect">
<option th:each="province : ${provinces}"
th:value="${province.id}"
th:text="${province.name}"></option>
</select>
<
br/>
<label>城市：</label>
<select name="city" id="citySelect">
<option th:each="city : ${cities}"
th:value="${city.id}"
th:text="${city.name}"></option>
</select>
</form>
</body>
</html>
```
### 步骤5：配置
Thymeleaf（可选，参考引用[1]和[3]）
在`application.properties`中配置（或
使用yml，如引用[3]）：
```properties
# 开发时关闭缓存
spring.
thymeleaf.cache=false
# 模板位置（默认templates，无需修改）
spring.
thymeleaf.prefix=classpath:/templates/
# 编码
spring.
thymeleaf.encoding=UTF-8
```
### 运行测试
启动应用，访问`http://localhost:8080/form`，即可看到两个下拉框，其中省份下拉框有所有省份，城市下拉框显示第一个省份的城市。
### 动态联动（附加）
如果需要实现选择省份后城市联动更新，需
使用JavaScript（如jQuery或Axios）发送异步请求获取城市数据，然后更新城市下拉框。这里不展开，但给出思路：
1. 给省份下拉框绑定`onchange`事件。
2. 事件触发时，获取选中的省份ID，通过Ajax请求后端接口（如`/cities?provinceId=1`）。
3. 后端接口返回该省份下的城市列表（JSON格式）。
4. 前端解析JSON并动态生成城市下拉框的`<option>`。
### 注意事项
- 下拉框的默认选中：若需要设置默认选中项，可在`<option>`中
使用`th:selected`（如`th:selected="${province.id == selectedProvinceId}"`）。
- 数据绑定：如果表单需要提交，确保`select`的`name`属性与后端接收参数一致。
通过以上步骤，即可在Spring Boot
Thymeleaf项目中实现下拉选择框功能[^1][^2][^4]。
---
§§相关问题§§
1.
Thymeleaf如何实现表单数据绑定？
2. 如何在
Thymeleaf中处理表单提交？
3. Spring Boot中如何实现下拉框的动态联动（Ajax）？
4.
Thymeleaf如何设置下拉框的默认选中项？</think>### Spring Boot
Thymeleaf 实现下拉选择框完整指南
在Spring Boot中
使用Thymeleaf实现下拉选择框（select）功能，主要通过以下步骤完成：
#### 1. 后端数据准备（Controller层）
```java
@Controller
public class FormController {
// 获取下拉框选项数据（可替换为
数据库查询）
private Map<String, List<String>> getDropdownOptions() {
Map<String, List<String>> options = new HashMap<>();
// 省份数据
options.put("provinces", Arrays.asList("北京市", "上海市", "广东省", "江苏省"));
// 城市数据（根据省份联动）
options.put("cities_北京市", Arrays.asList("东城区", "西城区", "朝阳区"));
options.put("cities_上海市", Arrays.asList("黄浦区", "徐汇区", "浦东新区"));
options.put("cities_广东省", Arrays.asList("广州市", "深圳市", "珠海市"));
options.put("cities_江苏省", Arrays.asList("南京市", "苏州市", "无锡市"));
return options;
}
@GetMapping("/form")
public String showForm(Model model) {
// 添加表单绑定对象
model.addAttribute("formData", new FormData());
// 添加下拉框选项数据
model.addAttribute("dropdownOptions", getDropdownOptions());
return "form-page"; // 对应
Thymeleaf模板
}
// 表单提交处理
@PostMapping("/submit")
public String handleSubmit(@ModelAttribute FormData formData) {
// 处理表单数据（保存到
数据库等操作）
System.out.println("选择的省份: " + formData.getProvince());
System.out.println("选择的城市: " + formData.getCity());
return "redirect:/success";
}
// 表单数据绑定类
public static class FormData {
private String province;
private String city;
// getters and setters
}
}
```
#### 2.
Thymeleaf前端实现（form-page.html）
```html
<!DOCTYPE html>
<html xmlns:th="http://www.
thymeleaf.org">
<head>
<title>下拉选择框示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form th:action="@{/submit}" th:object="${formData}" method="post">
<!-- 省份下拉框 -->
<div>
<label>选择省份：</label>
<select th:field="*{province}" id="provinceSelect">
<option value="">--请选择省份--</option>
<option th:each="province : ${dropdownOptions.provinces}"
th:value="${province}"
th:text="${province}"></option>
</select>
</div>
<!-- 城市下拉框（动态加载） -->
<div>
<label>选择城市：</label>
<select th:field="*{city}" id="citySelect" disabled="true">
<option value="">--请先选择省份--</option>
</select>
</div>
<button type="submit">提交</button>
</form>
<!-- 省市联动JavaScript -->
<script>
$(document).ready(function() {
// 省份选择变化时加载对应城市
$('#provinceSelect').change(function() {
var province = $(this).val();
var citySelect = $('#citySelect');
if(province) {
// 从后端获取城市数据（实际项目中应通过AJAX）
var cities = ${dropdownOptions};
var cityList = cities['cities_' + province];
// 清空并填充城市下拉框
citySelect.empty().append('<option value="">--选择城市--</option>');
$.each(cityList, function(i, city) {
citySelect.append($('<option>', {
value: city,
text: city
}));
});
citySelect.prop('disabled', false);
} else {
citySelect.empty().append('<option value="">--请先选择省份--</option>');
citySelect.prop('disabled', true);
}
});
});
</script>
</body>
</html>
```
#### 3. 关键配置（application.properties）
```properties
#
Thymeleaf配置
spring.
thymeleaf.cache=false # 开发时关闭缓存
spring.
thymeleaf.prefix=classpath:/templates/
spring.
thymeleaf.suffix=.html
spring.
thymeleaf.encoding=UTF-8
spring.
thymeleaf.servlet.content-type=text/html
```
#### 4. 实现效果
1. 初始状态：显示省份下拉框，城市下拉框禁用
2. 选择省份后：自动加载对应城市选项
3. 提交表单：后端获取选中的省/市值
#### 5.
数据库集成（参考引用[4]）
若需从
数据库加载选项：
```java
@Service
public class LocationService {
@Autowired
private ProvinceRepository provinceRepo;
public List<Province> getAllProvinces() {
return provinceRepo.findAll();
}
public List<City> getCitiesByProvince(Integer provinceId) {
return cityRepo.findByProvinceId(provinceId);
}
}
```
#### 6. 高级技巧
1. **设置默认选中**：
```html
<option th:value="广州" th:text="广州市" th:selected="${formData.city == '广州'}"></option>
```
2. **分组下拉框**：
```html
<select>
<optgroup label="华北地区">
<option>北京市</option>
<option>天津市</option>
</optgroup>
<optgroup label="华东地区">
<option>上海市</option>
<option>南京市</option>
</optgroup>
</select>
```
3. **AJAX动态加载**（推荐实际项目
使用）：
```javascript
$('#provinceSelect').change(function() {
$.get('/api/cities?province=' + $(this).val(), function(data) {
// 更新城市下拉框
});
});
```
---
本文介绍在Thymeleaf中使用th:utext标签替代th:text，实现从数据库读取数据并在网页上优雅地换行显示，避免了<br>等HTML标签的直接展示。
扫一扫
1652
到【灌水乐园】发言
