Arbeiten mit Auswahl und Option in Thymeleaf

1. Übersicht

Thymeleaf ist die sehr beliebte Template-Engine, die zusammen mit Spring Boot gebündelt wird. Wir haben bereits eine Reihe von Artikeln darüber veröffentlicht, und wir empfehlen dringend, die Thymeleaf-Reihe von Baeldung zu lesen.

In diesem Tutorial werden wir an , wie man die Arbeit mit suchen wählen und Option - Tags in Thymeleaf.

2. HTML-Grundlagen

In HTML können wir eine Dropdown-Liste mit mehreren Werten erstellen:

 Apple Banana Orange Pear 

Jede Liste besteht aus ausgewählten und verschachtelten Options- Tags. Standardmäßig rendert der Webbrowser eine Liste mit der ersten vorausgewählten Option .

Wir können steuern, welcher Wert ausgewählt wird, indem wir das ausgewählte Attribut verwenden:

Orange

Darüber hinaus können wir mithilfe des Attributs disabled festlegen, dass eine Option nicht ausgewählt werden kann:

Please select...

3. Thymeleaf

In Thymleaf können wir das Attribut th: field verwenden , um die Ansicht mit dem Modell zu verbinden:

Während das obige Beispiel nicht unbedingt die Verwendung einer Template-Engine erfordert, werden wir in den folgenden weiteren Beispielen die Leistungsfähigkeit von Thymeleaf sehen.

3.1. Option ohne Auswahl

Wenn wir an ein Szenario denken, in dem mehr Optionen zur Auswahl stehen, können Sie alle sauber und übersichtlich anzeigen, indem Sie das Attribut th: jedes zusammen mit th: value und th: text : verwenden.

In dem obigen Beispiel verwenden wir eine Folge von Zahlen von 0 bis 100. Wir haben den Wert jeder Nummer zuweisen i auf Option Tag- Wert Attribut, und wir verwenden die gleiche Nummer wie der angezeigte Wert.

Der Thymeleaf-Code wird im Browser wie folgt gerendert:

 0 1 2 ... 100 

Stellen wir uns dieses Beispiel als create vor , dh wir beginnen mit einem neuen Formular, und der Prozentwert musste nicht vorausgewählt werden .

3.2. Ausgewählte Option

Wenn wir unser Formular erweitern nun mit einem wollen Update - Funktionalität , das heißt, wir gehen zurück zu dem zuvor erstellten Datensatz, und wir wollen das Formular mit den vorhandenen Daten füllen, dann muss der Option ausgewählt werden .

Wir können dies erreichen, indem wir das Attribut th: selected zusammen mit einer Bedingung hinzufügen :

Im obigen Beispiel möchten wir den Wert 75 vorwählen, indem wir prüfen, ob i gleich 75 ist.

Dieser Code funktioniert jedoch nicht und der gerenderte HTML- Code lautet:

 0 ... 74 75 76 ... 100 

Um dies zu beheben, müssen wir das Feld th: entfernen und durch die Attribute name und id ersetzen :

Am Ende werden wir bekommen:

 0 ... 74 75 76 ... 100 

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 ist der während der Diskussion verwendete Code auf GitHub zu finden.