1. Обзор
Thymeleaf — популярный движок шаблонов, поставляемый вместе с Spring Boot. Мы уже публиковали несколько статей об этом и настоятельно рекомендуем ознакомиться с серией ForEach’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>
Каждый список состоит из тегов выбора и вложенных опций . По умолчанию веб-браузер отображает список с предварительно выбранным первым вариантом .
Мы можем контролировать, какое значение выбирается с помощью выбранного атрибута:
<option value="orange" selected>Orange</option>
Более того, мы можем указать, что параметр нельзя выбрать, используя атрибут disabled :
<option disabled>Please select...</option>
3. Лист тимьяна
В Thymeleaf мы можем использовать атрибут th:field для привязки представления к модели:
<select th:field="*{gender}">
<option th:value="'M'" th:text="Male"></option>
<option th:value="'F'" th:text="Female"></option>
</select>
Хотя приведенный выше пример не требует использования механизма шаблонов, в более сложных примерах мы увидим мощь Thymeleaf.
3.1. Вариант без выбора
Если мы подумаем о сценарии, в котором есть больше вариантов для выбора, то чистый и аккуратный способ отобразить их все — использовать атрибут th:each вместе с th:value и th:text :
<select th:field="*{percentage}">
<option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}">
</option>
</select>
В приведенном выше примере мы используем последовательность чисел от 0 до 100. Мы присваиваем значение каждого числа i атрибуту value тега option и используем то же число в качестве отображаемого значения. ``
Код 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>
Давайте представим этот пример как create , т. е. мы начинаем с новой формы, и процентное значение не нужно предварительно выбирать .
3.2. Выбранный вариант
Предположим, мы хотим расширить нашу форму с помощью функции обновления . В этом случае, т. е. мы возвращаемся к ранее созданной записи и хотим заполнить форму существующими данными, необходимо выбрать опцию .
Мы можем добиться этого, добавив атрибут th:selected вместе с некоторыми условиями:
<select th:field="*{percentage}">
<option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}"
th:selected="${i==75}"></option>
</select>
В приведенном выше примере мы хотим предварительно выбрать значение 75, проверив , равно ли i 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>
Чтобы исправить это, нам нужно удалить поле th: и заменить его атрибутами name и id :
<select id="percentage" name="percentage">
В итоге получим:
<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. Заполните раскрывающийся список списком
Давайте посмотрим, как заполнить раскрывающийся список списком в Thymeleaf. Для этого мы создадим список строк в контроллере и отобразим его в представлении.
Во-первых, давайте создадим контроллер с методом, который инициализирует список строк. Во-вторых, мы будем использовать атрибуты модели для хранения нашего списка для рендеринга внутри представления.
@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";
}
Наконец, мы можем обратиться к нашему атрибуту модели списка и перебрать его, чтобы отобразить каждый элемент списка как вариант раскрывающегося списка.
<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. Вывод
В этой короткой статье мы проверили, как работать с селекторами раскрывающегося списка/списка в Thymeleaf. Существует одна распространенная ошибка при предварительном выборе значений, для которой мы показали решение.
Как всегда, код, использованный во время обсуждения, можно найти на GitHub .