1. 概述
Thymeleaf 是一個流行的模板引擎，與 Spring Boot 捆綁在一起。我們已經發布了多篇文章關於它的內容，並強烈建議您回顧 Baeldung 的 Thymeleaf 系列。
在本教程中，我們將學習如何使用 Thymeleaf 中的 <em >select</em > 和 <em >option</em > 標籤。
2. HTML 基礎
在 HTML 中，我們可以使用多個值的下拉列表：
<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="pear">Pear</option>
</select>每個列表由 select 和嵌套的 option 標籤組成。默認情況下，Web 瀏覽器會渲染一個帶有首選選項預先選定的列表。
我們可以通過使用 selected 屬性來控制所選的值：
<option value="orange" selected>Orange</option>此外，我們可以通過使用 <em disabled 屬性來指定一個選項不可選擇：
<option disabled>Please select...</option>3. Thymeleaf
在 Thymeleaf 中，我們可以使用 屬性將視圖與模型綁定。
<select th:field="*{gender}">
<option th:value="'M'" th:text="Male"></option>
<option th:value="'F'" th:text="Female"></option>
</select>雖然上述示例不需要使用模板引擎，但在後續更復雜的示例中，我們將看到 Thymeleaf 的強大之處。
3.1. 不帶選擇的選項
在選項數量較多的情況下，使用 <em th:each> 屬性與 <em th:value> 和 <em th:text> 結合，以清晰簡潔的方式顯示所有選項是一種有效方法。
<select th:field="*{percentage}">
<option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}">
</option>
</select>在上述示例中，我們使用了從 0 到 100 的數字序列。我們將每個數字 i 的值分配給 option 標籤的 value 屬性，並使用相同的數字作為顯示的值。
Thymeleaf 代碼將在瀏覽器中渲染為：
<select id="percentage" name="percentage">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
...
<option value="100">100</option>
</select>讓我們以 create 為例來思考這個問題，因此我們從一個新的表單開始，並且 百分比值不需要預先選擇。
3.2. 選擇 選項
假設我們要擴展表單，添加 更新 功能。為了返回先前創建的記錄並用現有數據填充表單，需要選擇該選項。
可以通過添加 th:selected 屬性以及一些條件來實現這一點。
<select th:field="*{percentage}">
<option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}"
th:selected="${i==75}"></option>
</select>在上述示例中，我們希望通過檢查 i 是否等於 75 來預先選擇值為 75 的值。
然而，這段代碼將不起作用，渲染的 HTML 將為：
<select id="percentage" name="percentage">
<option value="0">0</option>
...
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
...
<option value="100">100</option>
</select>要解決這個問題，我們需要刪除 th:field 並將其替換為 name 和 id 屬性：
<select id="percentage" name="percentage">最終，我們會得到：
<select id="percentage" name="percentage">
<option value="0">0</option>
...
<option value="74">74</option>
<option value="75" selected="selected">75</option>
<option value="76">76</option>
...
<option value="100">100</option>
</select>4. 使用列表填充下拉框
現在讓我們看看如何在 Thymeleaf 中使用列表填充下拉框。為此，我們將創建一個控制器中的 String 列表，並在視圖中顯示它。
首先，我們將創建一個控制器，其中包含一個初始化 String 列表的方法。然後，我們將使用 Model 屬性來存儲我們的列表，以便在視圖中進行渲染：
@RequestMapping(value = "/populateDropDownList", method = RequestMethod.GET)
public String populateList(Model model) {
List<String> options = new ArrayList<String>();
options.add("option 1");
options.add("option 2");
options.add("option 3");
model.addAttribute("options", options);
return "dropDownList/dropDownList.html";
}最後，我們可以引用我們的列表 Model 屬性，並遍歷它以將每個列表元素顯示為下拉菜單中的一個選項：
<select class="form-control" id="dropDownList">
<option value="0">select option</option>
<option th:each="option : ${options}" th:value="${option}" th:text="${option}"></option>
</select>5. 結論
在本文中，我們演示瞭如何使用 Thymeleaf 中的下拉/列表選擇器進行操作。我們還討論了預選值的常見陷阱，並提供瞭解決方案。
