Trabalhando com Select e Option no Thymeleaf
1. Visão geral
O Thymeleaf é o mecanismo de modelagem muito popular incluído no Spring Boot. Já publicamos uma série de artigos sobre isso e é altamente recomendável revisar osexample’s Thymeleaf series.
Neste tutorial, veremos como trabalhar com as tagsselecteoption no Thymeleaf.
2. HTML Básico
Em HTML, podemos criar uma lista suspensa com vários valores:
Cada lista consiste emselecte tags aninhadasoption. By default, the web browser will render a list with the first option preselected.
Podemos controlar qual valor é selecionado usando o atributoselected:
Além disso, podemos especificar que uma opção não é selecionável usando o atributodisabled:
3. Thymeleaf
No Thymleaf, podemos usar o atributoth:field para vincular a visualização ao modelo:
Embora o exemplo acima realmente não exija o uso de um mecanismo de modelo, em exemplos mais avançados a seguir veremos o poder do Thymeleaf.
3.1. Option sem seleção
Se pensarmos em um cenário no qual há mais opções para escolher, uma maneira limpa e organizada de exibir todas elas é usando o atributoth:each junto comth:valueeth:text:
No exemplo acima, estamos usando uma sequência de números de 0 a 100. Atribuímos o valor de cada númeroi ao atributovalue da tagoption e usamos o mesmo número que o valor exibido.
O código Thymeleaf será renderizado no navegador como:
Let’s think about this example as create, ou seja, começamos com uma nova forma e opercentage value didn’t need to be preselected.
3.2. SelecionadoOption
If we want to expand our form now with an update functionality, ou seja, voltamos ao registro criado anteriormente e queremos preencher o formulário com os dados existentes e, em seguida,the option needs to be selected.
Podemos conseguir isso adicionando o atributoth:selected junto com alguma condição:
No exemplo acima, queremos pré-selecionar o valor de 75 verificando sei é igual a 75.
No entanto,this code won’t work, e o HTML renderizado serão:
Para corrigi-lo, precisamos removerth:fielde substituí-lo pelos atributosnameeid:
No final, teremos:
4. Conclusão
Neste breve artigo, verificamos como trabalhar com seletores suspensos / de lista no Thymeleaf. Existe uma armadilha comum na pré-seleção de valores, para a qual mostramos a solução.
Como sempre, o código usado durante a discussão pode ser encontradoover on GitHub.