Travailler avec Select et Option dans Thymeleaf
1. Vue d'ensemble
Thymeleaf est le moteur de création de modèles très populaire fourni avec Spring Boot. Nous avons déjà publié un certain nombre d'articles à ce sujet et nous vous recommandons vivement de passer en revue lesexample’s Thymeleaf series.
Dans ce didacticiel, nous allons voir comment utiliser les balisesselect etoption dans Thymeleaf.
2. Bases HTML
En HTML, nous pouvons construire une liste déroulante avec plusieurs valeurs:
Chaque liste se compose de balisesselect etoption imbriquées. By default, the web browser will render a list with the first option preselected.
Nous pouvons contrôler quelle valeur est sélectionnée en utilisant l'attributselected:
De plus, nous pouvons spécifier qu’une option n’est pas sélectionnable en utilisant l’attributdisabled:
3. Thymeleaf
Dans Thymleaf, nous pouvons utiliser l'attributth: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 façon propre et soignée de les afficher toutes est d'utiliser l'attributth:each avecth:value etth:text:
Dans l'exemple ci-dessus, nous utilisons une séquence de nombres de 0 à 100. Nous attribuons la valeur de chaque nombrei à l’attributvalue de la baliseoption, et nous utilisons le même nombre que la valeur affichée.
Le code Thymeleaf sera rendu dans le navigateur comme:
Let’s think about this example as create, c'est-à-dire que nous commençons avec une nouvelle forme, et lespercentage value didn’t need to be preselected.
3.2. SélectionnéOption
If we want to expand our form now with an update functionality, c'est-à-dire que nous retournons à l'enregistrement précédemment créé, et nous voulons remplir le formulaire avec les données existantes, puisthe option needs to be selected.
Nous pouvons y parvenir en ajoutant l'attributth:selected avec une condition:
Dans l'exemple ci-dessus, nous voulons présélectionner la valeur de 75 en vérifiant sii est égal à 75.
Cependant,this code won’t work, et le HTML rendu seront:
Pour résoudre ce problème, nous devons supprimerth:field et le remplacer par les attributsname etid:
Au final, nous aurons:
4. Conclusion
Dans ce court article, nous avons vérifié comment utiliser les sélecteurs de liste déroulante / liste dans Thymeleaf. Il existe un écueil 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 trouveover on GitHub.