Working with Select and Option in Thymeleaf – 在Thymeleaf中使用选择和选项

最后修改: 2018年 6月 19日

1. Overview


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.


2. HTML Basics


In HTML, we can build a drop-down list with multiple values:


    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="pear">Pear</option>

Each list consists of select and nested option tags. By default, the web browser will render a list with the first option preselected.


We can control which value is selected by using the selected attribute:


<option value="orange" selected>Orange</option>

Moreover, we can specify that an option isn’t selectable by using the disabled attribute:


<option disabled>Please select...</option>

3. Thymeleaf


In Thymeleaf, we can use the th:field attribute to bind the view with the model:


<select th:field="*{gender}">
    <option th:value="'M'" th:text="Male"></option>
    <option th:value="'F'" th:text="Female"></option>

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.


3.1. Option Without Selection


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:


<select th:field="*{percentage}">
    <option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}">

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.


The Thymeleaf code will be rendered in the browser as:


<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>

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


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:


<select th:field="*{percentage}">
    <option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}" 

In the above example, we want to preselect the value of 75 by checking if i is equal to 75.


However, this code won’t work, and the rendered HTML will be:


<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>

To fix it, we need to remove th:field and replace it with the name and id attributes:


<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>

4. Populate a Drop Down With a List 


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:


<select class="form-control" id="dropDownList">
    <option value="0">select option</option>
    <option th:each="option : ${options}" th:value="${option}" th:text="${option}"></option>

5. Conclusion


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.


As always, the code used in this article can be found over on GitHub.