thymeleaf动态下拉列表

Thymeleaf是一种流行的Java模板引擎，可以帮助我们快速构建Web应用程序。动态下拉列表通常是在用户选择一个选项时自动更新另一个下拉列表的选项，Thymeleaf可以很容易地实现这一功能。

具体实现方法是，在html页面中使用Thymeleaf的属性绑定功能将下拉列表与后端的数据模型绑定起来。然后，在JavaScript中使用jQuery或其他库来处理用户选择事件，根据选择的选项更新另一个下拉列表。

以下是实现动态下拉列表的一些示例代码：

1. HTML模板代码

<select id="firstSelect" th:field="*{firstSelect}" onchange="updateSecondSelect()">
  <option value="">-- 请选择 --</option>
  <option th:each="item : ${firstList}" th:value="${item.value}" th:text="${item.label}"></option>
</select>

<select id="secondSelect" th:field="*{secondSelect}">
  <option value="">-- 请选择 --</option>
  <option th:each="item : ${secondList}" th:value="${item.value}" th:text="${item.label}"></option>
</select>

2. JavaScript代码

function updateSecondSelect() {
  var firstValue = $("#firstSelect").val();
  $.ajax({
    url: "/updateSecondList",
    type: "POST",
    data: {firstValue: firstValue},
    success: function(data) {
      $("#secondSelect").empty();
      $.each(data, function(key, value) {
        $("#secondSelect").append($("<option></option>")
          .attr("value", value.value).text(value.label));
      });
    }
  });
}

3. 后端控制器代码

@PostMapping("/updateSecondList")
@ResponseBody
public List<OptionItem> updateSecondList(@RequestParam("firstValue") String firstValue) {
  List<OptionItem> secondList = // 根据firstValue获取对应的secondList
  return secondList;
}