Valor selecionado em select com thymeleaf e Spring Boot

Ao editar registros que utilizam select do HTML e thymeleaf nos deparamos com o problema da edição. Vou mostrar como mostrar o registro selecionado.

por Wolmir Cezer Garbin - 17 de nov de 2017 - Spring Boot - TUTORIAL

Última atualização em: 17 de nov de 2017 | 11149 Visualizações

Primeiro criamos a classe Pais:

public class Pais {

    private Long id;
    private String nome;

    public Pais() { }

    public Pais(Long id, String nome) {
        this.id = id;
        this.nome = nome;
    }


    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getNome() {
        return nome;
    }

    public void setNome(String nome) {
        this.nome = nome;
    }
}

Esta classe será utilizada para criar os valores do select no HTML.

Logo após configuramos o controller, para isso será utilizado a classe principal do Spring Boot.

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Arrays;
import java.util.List;

@SpringBootApplication
@Controller
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}
    
	@GetMapping("/")
	public String index(Model model) {
		List<Pais> ls = Arrays.asList(new Pais(1L, "EUA"), new Pais(2L, "Brasil"), new Pais(3L, "Italia"));

		model.addAttribute("ls", ls);
		model.addAttribute( "selecionado", new Pais(2L, "Brasil") );

		return "index";
	}
}

Note que temos uma lista de Pais que é enviada para a view, também temos o pais que é o selecionado que deve ser mostrado ao carregar a página.

O pom.xml deve estar configurado da seguinte forma:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.example</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>demo</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.6.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<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.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

Por fim, criamos dentro da pasta template o index.html que será nossa visualização.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
    <p>Selected option value!</p>

    <select name="pais">
        <option th:each="pais : ${ls}"
                th:value="${pais.id}"
                th:selected="${pais.id == selecionado.id}"
                th:text="${pais.nome}" />
    </select>

</body>
</html>

Executando o projeto será mostrado como pais selecionado o Brasil código 2.

Todo o código fonte está disponível no github: https://github.com/receitas-de-codigo/option-select-spring-boot

Qualquer dúvida deixe nos comentários!

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.