Как создать выпадающий список с использованием Thymeleaf и Spring Boot?

Как создать выпадающий список с использованием Thymeleaf и Spring Boot?
  • 8 ноября 2023 г. 11:58
Ответы на вопрос 1
Чтобы создать выпадающий список с использованием Thymeleaf и Spring Boot, вам понадобится выполнить следующие шаги:

1. Создайте класс модели-объекта, который будет представлять элементы списка. Например, если вы хотите создать выпадающий список с городами, создайте класс City с полями id и name:
```java
public class City {
    private int id;
    private String name;
    
    // геттеры и сеттеры
}
```

2. В контроллере определите список элементов, которые будут доступны в выпадающем списке. Например, создайте метод, который будет возвращать список городов:
```java
@Controller
public class CityController {
    @GetMapping("/cities")
    public String getCities(Model model) {
        List<City> cities = new ArrayList<>();
        cities.add(new City(1, "Москва"));
        cities.add(new City(2, "Санкт-Петербург"));
        cities.add(new City(3, "Новосибирск"));
        
        model.addAttribute("cities", cities);
        
        return "cities";
    }
}
```

3. В представлении Thymeleaf (например, файл cities.html) определите выпадающий список, используя Thymeleaf-атрибуты. Например:
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Выпадающий список с использованием Thymeleaf и Spring Boot</title>
</head>
<body>
    <h1>Выпадающий список с городами</h1>
    <form action="#">
        <label for="city">Выберите город:</label>
        <select id="city" name="city" th:field="*{selectedCity}">
            <option th:each="city : ${cities}" 
                    th:value="${city.id}" 
                    th:text="${city.name}"></option>
        </select>
        <button type="submit">Отправить</button>
    </form>
</body>
</html>
```

4. В контроллере определите метод для обработки формы, который будет принимать выбранный город:
```java
@Controller
public class CityController {
    // ...
    
    @PostMapping("/cities")
    public String submitCity(@RequestParam("city") int cityId) {
        // обработка выбранного города
        
        return "redirect:/";
    }
}
```

Теперь, когда вы открываете страницу '/cities', у вас должен быть доступен выпадающий список с городами, а при выборе города и отправке формы, выбранный город будет обработан контроллером.
Похожие вопросы