ThymeleafでのSelectとOptionの操作

投稿日: 2019-10-18 2022-11-09
タグ: Spring MVC, Thymeleaf

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.

In this tutorial, we’ll learn how to work with the select and option tags in Thymeleaf.

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ブラウザは最初のオプションが事前に選択されたリストをレンダリングします。

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

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

さらに、 disable 属性を使用して、オプションを選択できないように指定できます。

<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. オプション選択なし**

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.

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. 選択したオプション

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>

上記の例では、 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>

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. ドロップダウンにリストを入力します

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

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.

getdocs

13036