Arbeiten mit Select und Option in Thymeleaf
1. Überblick
Thymeleaf ist die sehr beliebte Template-Engine, die zusammen mit Spring Boot geliefert wird. Wir haben bereits eine Reihe von Artikeln darüber veröffentlicht und empfehlen dringend, dieexample’s Thymeleaf series zu überschreiten.
In diesem Tutorial erfahren Sie, wie Sie mit den Tagsselect undoptionin Thymeleaf arbeiten.
2. HTML-Grundlagen
In HTML können wir eine Dropdown-Liste mit mehreren Werten erstellen:
Jede Liste besteht ausselect und verschachteltenoption Tags. By default, the web browser will render a list with the first option preselected.
Wir können steuern, welcher Wert ausgewählt wird, indem wir das Attributselectedverwenden:
Darüber hinaus können wir mithilfe des Attributsdisabledfestlegen, dass eine Option nicht ausgewählt werden kann:
3. Thymeleaf
In Thymleaf können wir das Attributth:fieldverwenden, um die Ansicht mit dem Modell zu verbinden:
Während das obige Beispiel nicht unbedingt die Verwendung einer Vorlagen-Engine erfordert, werden wir in den folgenden weiteren Beispielen die Leistungsfähigkeit von Thymeleaf sehen.
3.1. Option ohne Auswahl
Wenn wir uns ein Szenario überlegen, in dem mehr Optionen zur Auswahl stehen, können Sie alle sauber und übersichtlich anzeigen, indem Sie das Attributth:each zusammen mitth:value undth:text verwenden:
Im obigen Beispiel verwenden wir eine Folge von Zahlen von 0 bis 100. Wir weisen den Wert jeder%(t0)s demvalue-Attribut desoption-Tags zu und verwenden dieselbe Nummer wie der angezeigte Wert.
Der Thymeleaf-Code wird im Browser wie folgt gerendert:
Let’s think about this example as create, d. h. wir beginnen mit einer neuen Form und denpercentage value didn’t need to be preselected.
3.2. AusgewählteOption
If we want to expand our form now with an update functionality, d. h. wir kehren zum zuvor erstellten Datensatz zurück und möchten das Formular mit vorhandenen Daten füllen, dannthe option needs to be selected.
Wir können dies erreichen, indem wir das Attributth:selectedzusammen mit einer Bedingung hinzufügen:
Im obigen Beispiel möchten wir den Wert 75 vorwählen, indem wir prüfen, obi gleich 75 ist.
this code won’t work, und das gerenderte HTML sind jedoch:
Um dies zu beheben, müssen wirth:field entfernen und durch die Attributename undidersetzen:
Am Ende werden wir bekommen:
4. Fazit
In diesem kurzen Artikel haben wir überprüft, wie Sie mit Dropdown- / Listen-Selektoren in Thymeleaf arbeiten. Es gibt eine häufige Gefahr bei der Vorauswahl von Werten, für die wir die Lösung gezeigt haben.
Wie immer kann der während der Diskussion verwendete Codeover on GitHub gefunden werden.