1. Overview
1.概述
Thymeleaf is a popular template engine bundled together with Spring Boot. We’ve already published several articles about it, and we highly recommend going over Baeldung’s Thymeleaf series.
Thymeleaf是一个与Spring Boot捆绑在一起的流行模板引擎。我们已经发表了几篇关于它的文章，我们强烈推荐大家去看Baeldung的Thymeleaf系列。
In this tutorial, we’ll learn how to work with the select and option tags in Thymeleaf.
在本教程中，我们将学习如何在Thymeleaf中使用select和option标签。
2. HTML Basics
2.HTML基础知识
In HTML, we can build a drop-down list with multiple values:
在HTML中，我们可以建立一个有多个值的下拉列表。
<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="pear">Pear</option>
</select>Each list consists of select and nested option tags. By default, the web browser will render a list with the first option preselected.
每个列表由select和嵌套的option标签组成。默认情况下，网络浏览器将呈现一个预选了第一个选项的列表。
We can control which value is selected by using the selected attribute:
我们可以通过使用selected属性来控制哪个值被选中。
<option value="orange" selected>Orange</option>Moreover, we can specify that an option isn’t selectable by using the disabled attribute:
此外，我们可以通过使用disabled属性来指定一个选项不可以选择。
<option disabled>Please select...</option>3. Thymeleaf
3.百里香叶
In Thymeleaf, we can use the th:field attribute to bind the view with the model:
在Thymeleaf中，我们可以使用th:field属性来绑定视图和模型。
<select th:field="*{gender}">
<option th:value="'M'" th:text="Male"></option>
<option th:value="'F'" th:text="Female"></option>
</select>While the above example doesn’t require using a template engine, in the more advanced examples to follow, we’ll see the power of Thymeleaf.
虽然上面的例子不需要使用模板引擎，但在后面更高级的例子中，我们将看到Thymeleaf的力量。
3.1. Option Without Selection
3.1.选择没有选择
In a scenario where there are more options to choose from, a neat and clean way to display all of them is by using the th:each attribute together with th:value and th:text:
在有更多选项可供选择的情况下，显示所有选项的整洁方式是使用th:each属性与th:value和th:text。
<select th:field="*{percentage}">
<option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}">
</option>
</select>In the above example, we used a sequence of numbers from 0 to 100. We assigned the value of each number i to the option tag’s value attribute, and we used the same number as the displayed value.
在上面的例子中，我们使用了一个从0到100的数字序列。我们将每个数字的值i分配给option标签的value属性，并使用相同的数字作为显示值。
The Thymeleaf code will be rendered in the browser as:
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>Let’s think about this example as create; so we start with a new form, and the percentage value doesn’t need to be preselected.
让我们把这个例子看作是创建；所以我们从一个新的表单开始，百分比值不需要预选。
3.2. Selected Option
3.2.选定的选项
Suppose we want to expand our form with an update functionality. In order to go back to the previously created record and populate the form with existing data, the option needs to be selected.
假设我们想用更新功能来扩展我们的表单。为了回到之前创建的记录，并将现有数据填充到表单中，需要选择该选项。
We can achieve this by adding the th:selected attribute, along with some conditions:
我们可以通过添加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>In the above example, we want to preselect the value of 75 by checking if i is equal to 75.
在上面的例子中，我们想通过检查i是否等于75，来预选75的值。
However, this code won’t work, and the rendered HTML will be:
然而，这段代码不会起作用，渲染的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>To fix it, we need to remove th:field and replace it with the name and id attributes:
为了解决这个问题，我们需要删除th:field，并用name和id属性来取代它：。
<select id="percentage" name="percentage">In the end, we’ll get:
最后，我们会得到。
<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. Populate a Drop Down With a List
4.用列表填充下拉菜单
Now let’s see how to populate a Drop Down with a list in Thymeleaf. To do so, we’ll create a String list in a controller, and display it in a view.
现在让我们看看如何在Thymeleaf中用列表来填充Drop Down。为此，我们将在控制器中创建一个String列表，并在视图中显示它。
First, we’ll create a controller with a method that initializes a String list. Then we’ll use Model attributes to hold our list for rendering inside the view:
首先，我们将创建一个控制器，该控制器有一个初始化字符串列表的方法。然后，我们将使用模型属性来保存我们的列表，以便在视图中进行渲染。
@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";
}Finally, we can refer to our list Model attribute and loop over it to display each list element as an option of the drop-down:
最后，我们可以参考我们的列表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. Conclusion
5.结论
In this brief article, we demonstrated how to work with drop-down/list selectors in Thymeleaf. We also discussed a common pitfall with preselecting values, and worked through the solution for it.
在这篇简短的文章中，我们演示了如何在Thymeleaf中使用下拉/列表选择器。我们还讨论了预选值的一个常见缺陷，并讨论了解决这个问题的方法。
As always, the code used in this article can be found over on GitHub.
一如既往，本文中所使用的代码可以在GitHub上找到over。