1. Обзор
Thymeleaf-это очень популярный движок шаблонов в комплекте с Spring Boot. Мы уже опубликовали ряд статей об этом, и мы настоятельно рекомендуем ознакомиться с серией зданий Thymeleaf .
В этом уроке мы рассмотрим, как работать с тегами select и option в Thymeleaf.
2. Основы HTML
В HTML мы можем построить раскрывающийся список с несколькими значениями:
Каждый список состоит из select и вложенных option тегов. По умолчанию веб-браузер отобразит список с предварительно выбранным первым параметром .
Мы можем контролировать, какое значение выбрано с помощью атрибута selected :
Кроме того, мы можем указать, что параметр не выбирается с помощью атрибута disabled :
3. Тимелиаф
В Thymleaf мы можем использовать атрибут th:field для привязки представления к модели:
Хотя приведенный выше пример на самом деле не требует использования шаблонного движка, в более продвинутых примерах мы увидим мощь Thymeleaf.
3.1. Опция Без Выбора
Если мы подумаем о сценарии, в котором есть больше вариантов на выбор, чистый и аккуратный способ отобразить их все-это использовать th:каждый атрибут вместе с th:значение и th:текст :
В приведенном выше примере мы используем последовательность чисел от 0 до 100. Мы присваиваем значение каждого числа i | параметру тега value атрибута и используем то же число, что и отображаемое значение.
Код Thymeleaf будет отображаться в браузере как:
Давайте рассмотрим этот пример как create , т. Е. Мы начнем с новой формы, и процентное значение не нужно было предварительно выбирать .
3.2. Выбранный Вариант
Если мы хотим расширить нашу форму сейчас с помощью обновления функциональности , т. Е. Мы возвращаемся к ранее созданной записи и хотим заполнить форму существующими данными, то необходимо выбрать опцию .
Мы можем достичь этого, добавив атрибут th:selected вместе с некоторым условием:
В приведенном выше примере мы хотим предварительно выбрать значение 75, проверив, равен ли i 75.
Однако этот код не будет работать, и отображаемый HTML будет:
Чтобы исправить это, нам нужно удалить th:поле и замените его на имя и идентификатор атрибуты:
В конце концов, мы получим:
4. Заключение
В этой короткой статье мы проверили, как работать с селекторами раскрывающихся списков в Thymeleaf. Существует одна общая ловушка с предварительным выбором значений, для которой мы показали решение.
Как всегда, код, используемый во время обсуждения, можно найти на GitHub .