Working with Select and Option in Thymeleaf

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.

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:

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

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

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}">
    </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.

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

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}" 
      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.

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

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

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.

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

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.