«1. Обзор

Thymeleaf — очень популярный движок шаблонов, поставляемый вместе с Spring Boot. Мы уже опубликовали ряд статей об этом и настоятельно рекомендуем ознакомиться с серией Baeldung’s Thymeleaf.

В этом уроке мы рассмотрим, как работать с тегами select и option в 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>

Каждый список состоит из тегов выбора и вложенных опций. По умолчанию веб-браузер отображает список с предварительно выбранным первым вариантом.

Мы можем контролировать, какое значение будет выбрано, используя атрибут selected: 

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

Более того, мы можем указать, что опция не может быть выбрана, используя атрибут disabled: 

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

3. Thymeleaf ~~ ~ В Thymleaf мы можем использовать атрибут th:field для привязки представления к модели:

Хотя приведенный выше пример на самом деле не требует использования механизма шаблонов, в более продвинутых примерах мы увидим всю мощь листа тимьяна. 

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

3.1. Опция без выбора

Если мы подумаем о сценарии, в котором есть больше опций для выбора, чистый и аккуратный способ отобразить их все — использовать атрибут th:each вместе с th:value и th:text: ~ ~~

В приведенном выше примере мы используем последовательность чисел от 0 до 100. Мы присваиваем значение каждого числа i атрибуту value тега option и используем то же число в качестве отображаемого значения. 

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

Код 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>

3.2. Выбранный вариант

Если мы хотим сейчас расширить нашу форму с помощью функции обновления, т. е. вернуться к ранее созданной записи и мы хотим заполнить форму существующими данными, то этот параметр необходимо выбрать.

Мы можем добиться этого, добавив атрибут th:selected вместе с некоторым условием:

В приведенном выше примере мы хотим предварительно выбрать значение 75, проверив, равно ли i 75. 

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

Однако , этот код не будет работать, и отрендеренный HTML будет:

Чтобы исправить это, нам нужно удалить th:field и заменить его атрибутами name и id: 

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

В конце , мы получим: 

<select id="percentage" name="percentage">

4. Заключение 

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

В этой короткой статье мы проверили, как работать с раскрывающимися/списочными селекторами в Thymeleaf. Существует одна распространенная ошибка при предварительном выборе значений, для которой мы показали решение.

Как всегда, код, использованный во время обсуждения, можно найти на GitHub.

«