How to populate dropdown in Thymeleaf in Spring Boot Project? In this article, we will see the spring boot example to populate dropdown/select in Thymeleaf in Spring Boot.
In a web application, there can be a requirement where you want to populate the dropdown or the select tag from the backend in the thymeleaf template. So, here will see one way in which we can handle dropdown in the thymeleaf template.
Example to populate dropdown in Thymeleaf in Spring Boot Project
Step 1: Open IDE STS- Spring Tool Suite
Step 2: Go to File > Spring Starter Project.
Step 3: Now, fill all the fields as shown below and click Next.
Step 4: Now, Add the dependencies of Thymeleaf and spring web and click Next > Finish.
Now, wait for some time and your project structure will be ready. Go to the pom.xml file and you will see the following dependency being added automatically.
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency>
Project Structure
Configure application. properties file
#change the port number server.port=8888
Create a Controller
Create a TestController to handle requests. The request for the web page will be handle by the handler methods in the controller.
TestController
package com.example.thymeleaf.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import com.example.thymeleaf.model.Person;
@Controller
public class TestController {
List<String> gameList;
@ModelAttribute
public void preLoad(Model model){
gameList = new ArrayList<>();
gameList.add("Super Mario");
gameList.add("Contraaa");
gameList.add("Elevator");
}
@GetMapping(value = "/")
public String home(Model model) {
model.addAttribute("gamesList", gameList);
return "person-form";
}
@PostMapping(value = "/save")
public String save(@ModelAttribute ("person") Person person, Model model) {
model.addAttribute("getdata", person.toString());
return "display";
}
}
- @Controller annotation marks the TestController class a Request Handler.
- Every request coming for the ‘/’ URL will be handled by the home() method. It would redirect you to the person-form page.
- Here, create a method preLoad() and annotate it with @ModelAttribute annotation. Use the Array List to add the list of objects.
- Pass the list into the model inside the home() method.
Create a Model class
Person.java
This class is created to hold the data of the application (to model the data of the application)
package com.example.thymeleaf.model;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;
@Setter
@Getter
@ToString
public class Person {
private String name;
private String teamName;
private String games;
}
- Take three fields name, teamName, and games.
- I have used the Lombok library to remove boilerplate code. In case you want to know what is Lombok check this article https://codedec.com/tutorials/how-to-configure-lombok-into-eclipse/
Create a Template
person-from.html
In the spring boot application, adding a thymeleaf template is quite simple. Go to src/main/resources/template folder and create a person-from.html file.
<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Codebun</title>
</head>
<body style="background-color: #f0f4c3">
<form th:action="@{/save}" th:object="${person}" method="post">
<table align="center">
<tr><td>Name :</td><td><input type="text" name="name"></td></tr>
<tr><td>Team Name :</td><td><input type="text" name="teamName"></td></tr>
<tr><td>Favourite Games :</td>
<td><select name="games">
<option th:each="games : ${gamesList}" th:text="${games}"/>
</select></tr>
<tr><td><button type="submit">Submit</button></td><td></td></tr>
</table>
</form>
</body>
</html>
Here, the important part is how to iterate over the array list: use the th: each attribute with the data. It will iterate over gameList. Then the model attribute ‘games’ is accessed using ${} notation.
display.html
<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Codebun</title>
</head>
<body style="background-color: #f0f4c3">
<form th:action="@{/save}" th:object=${person}>
<h3 align="center">Data from the form</h3>
<div style="font-size: large;" align="center" th:text=${getdata}></div>
<div align="center" >
<h3 align="center">Displaying Each Field value</h3>
<span>Name : <span th:text="${person.name}"></span></span><br>
<span>Team Name : <span th:text="${person.teamName}"></span></span><br>
<span>Favourite Game : <span th:text="${person.games}"></span></span>
</div>
</form>
</body>
</html>
Now, Run the ThymeleafLesson2Application class and Go to localhost:8888 and see the following output.
In this way, we have learned how to populate dropdowns in the thymeleaf template in a spring boot project.
