Работа с Select и Option в Thymeleaf
1. обзор
Thymeleaf - очень популярный шаблонизатор, связанный с Spring Boot. Мы уже опубликовали ряд статей об этом, и настоятельно рекомендуем перейти наexample’s Thymeleaf series.
В этом руководстве мы рассмотрим, как работать с тегамиselect иoption в Thymeleaf.
2. Основы HTML
В HTML мы можем создать выпадающий список с несколькими значениями:
Каждый список состоит из теговselect и вложенных теговoption. By default, the web browser will render a list with the first option preselected.
Мы можем контролировать, какое значение выбрано, используя атрибутselected:
Более того, мы можем указать, что параметр нельзя выбрать, используя атрибутdisabled:
3. Thymeleaf
В Thymleaf мы можем использовать атрибутth:field для привязки представления к модели:
Хотя в приведенном выше примере на самом деле не требуется использование механизма шаблонов, в более сложных примерах мы увидим мощь Thymeleaf.
3.1. Option без выбора
Если мы подумаем о сценарии, в котором есть больше вариантов на выбор, чистый и аккуратный способ отобразить их все - использовать атрибутth:each вместе сth:value иth:text:
В приведенном выше примере мы используем последовательность чисел от 0 до 100. Мы присваиваем значение каждого числаi атрибутуvalue тегаoption, и мы используем то же число, что и отображаемое значение.
Код Thymeleaf будет отображаться в браузере как:
Let’s think about this example as create, т.е. мы начинаем с новой формы, иpercentage value didn’t need to be preselected.
3.2. ВыбранOption
If we want to expand our form now with an update functionality, т.е. мы возвращаемся к ранее созданной записи и хотим заполнить форму существующими данными, а затемthe option needs to be selected.
Мы можем добиться этого, добавив атрибутth:selected вместе с некоторым условием:
В приведенном выше примере мы хотим предварительно выбрать значение 75, проверив, равно лиi 75.
Однакоthis code won’t work, и обработанный HTML будут:
Чтобы исправить это, нам нужно удалитьth:field и заменить его атрибутамиname иid:
В итоге мы получим:
4. Заключение
В этой короткой статье мы проверили, как работать с выпадающими списками и селекторами в Thymeleaf. Есть одна распространенная ошибка с предварительным выбором значений, решение которой мы показали.
Как всегда, код, использованный во время обсуждения, можно найтиover on GitHub.