Utilisation de Select et Option dans Thymeleaf

1. Vue d'ensemble

Thymeleaf est le moteur de création de modèles très populaire associé à Spring Boot. Nous avons déjà publié un certain nombre d'articles à ce sujet, et nous vous recommandons vivement de passer en revue la série Thymeleaf de Baeldung.

Dans ce didacticiel, nous allons voir comment travailler avec les balises de sélection et d' option dans Thymeleaf.

2. Principes de base du HTML

En HTML, nous pouvons créer une liste déroulante avec plusieurs valeurs:

 Apple Banana Orange Pear 

Chaque liste se compose de balises d' option select et imbriquées . Par défaut, le navigateur Web affichera une liste avec la première option présélectionnée .

Nous pouvons contrôler quelle valeur est sélectionnée en utilisant l' attribut sélectionné :

Orange

De plus, nous pouvons spécifier qu'une option n'est pas sélectionnable en utilisant l' attribut désactivé :

Please select...

3. Thymeleaf

Dans Thymleaf, nous pouvons utiliser l' attribut th: field pour lier la vue avec le modèle:

Bien que l'exemple ci-dessus ne nécessite pas vraiment d'utiliser un moteur de modèle, dans les exemples plus avancés à suivre, nous verrons la puissance de Thymeleaf.

3.1. Option sans sélection

Si nous pensons à un scénario dans lequel il y a plus d'options parmi lesquelles choisir, une manière propre et soignée de les afficher toutes est d'utiliser th: each attribut avec th: value et th: text :

Dans l'exemple ci-dessus, nous utilisons une séquence de nombres de 0 à 100. Nous attribuons la valeur de chaque nombre i à l' attribut value de la balise d' option , et nous utilisons le même nombre que la valeur affichée.

Le code Thymeleaf sera rendu dans le navigateur sous la forme:

 0 1 2 ... 100 

Pensons à cet exemple en tant que création , c'est-à-dire que nous commençons avec un nouveau formulaire et que la valeur en pourcentage n'a pas besoin d'être présélectionnée .

3.2. Option sélectionnée

Si nous voulons étendre notre formulaire maintenant avec une fonctionnalité de mise à jour , c'est-à-dire que nous retournons à l'enregistrement précédemment créé et que nous voulons remplir le formulaire avec des données existantes, alors l'option doit être sélectionnée .

Nous pouvons y parvenir en ajoutant l' attribut th: selected avec une condition:

Dans l'exemple ci-dessus, nous voulons présélectionner la valeur de 75 en vérifiant si i est égal à 75.

Cependant, ce code ne fonctionnera pas et le HTML rendu sera:

 0 ... 74 75 76 ... 100 

Pour résoudre ce problème, nous devons supprimer th: field et le remplacer par les attributs name et id :

Au final, nous obtiendrons:

 0 ... 74 75 76 ... 100 

4. Conclusion

Dans ce court article, nous avons vérifié comment travailler avec les sélecteurs de liste déroulante / liste dans Thymeleaf. Il existe un piège courant avec la présélection des valeurs, pour lequel nous avons montré la solution.

Comme toujours, le code utilisé lors de la discussion se trouve à l'adresse over sur GitHub.