streamalism.org

1. Overzicht

Thymeleaf is de zeer populaire sjabloonengine die samen met Spring Boot wordt gebundeld. We hebben er al een aantal artikelen over gepubliceerd en we raden je ten zeerste aan om de Baeldung's Thymeleaf-serie te bekijken.

In deze tutorial gaan we kijken hoe we ermee kunnen werken selecteer en keuze tags in Thymeleaf.

2. HTML Basics

In HTML kunnen we een vervolgkeuzelijst maken met meerdere waarden:

 Appel Banaan Sinaasappel Peer 

Elke lijst bestaat uit selecteer en genest keuze tags. Standaard geeft de webbrowser een lijst weer met de eerste optie vooraf geselecteerd.

We kunnen bepalen welke waarde wordt geselecteerd door te gebruiken geselecteerd attribuut:

Oranje

Bovendien kunnen we specificeren dat een optie niet kan worden geselecteerd door de gehandicapt attribuut:

Selecteer alstublieft...

3. Thymeleaf

In Thymleaf kunnen we gebruiken th: veld attribuut om de weergave aan het model te binden:

Hoewel het bovenstaande voorbeeld niet echt het gebruik van een sjabloonengine vereist, zullen we in meer geavanceerde voorbeelden die volgen, de kracht van Thymeleaf zien.

3.1. Keuze Zonder selectie

Als we nadenken over een scenario waarin er meer opties zijn om uit te kiezen, is een schone en nette manier om ze allemaal weer te geven, door te gebruiken th: elk attribuut samen met th: waarde en th: tekst:

In het bovenstaande voorbeeld gebruiken we een reeks getallen van 0 tot 100. We kennen de waarde van elk getal toe ik naar keuze tag's waarde attribuut, en we gebruiken hetzelfde nummer als de weergegeven waarde.

De Thymeleaf-code wordt in de browser weergegeven als:

 0 1 2 ... 100 

Laten we over dit voorbeeld nadenken als creëren, d.w.z. we beginnen met een nieuw formulier en de percentagewaarde hoefde niet vooraf te worden geselecteerd.

3.2. Geselecteerd Keuze

Als we ons formulier nu willen uitbreiden met een bijwerken functionaliteit, d.w.z. we gaan terug naar het eerder gemaakte record en we willen het formulier vullen met bestaande gegevens de optie moet worden geselecteerd.

Dat kunnen we bereiken door toe te voegen th: geselecteerd attribuut samen met een voorwaarde:

In het bovenstaande voorbeeld willen we de waarde van 75 voorselecteren door aan te vinken of ik is gelijk aan 75.

Echter, deze code werkt niet, en de weergegeven HTML zal zijn:

 0 ... 74 75 76 ... 100 

Om het probleem op te lossen, moeten we verwijderen th: veld en vervang het door naam en ID kaart attributen:

Uiteindelijk krijgen we:

 0 ... 74 75 76 ... 100 

4. Conclusie

In dit korte artikel hebben we gecontroleerd hoe te werken met vervolgkeuzelijst / lijst-selectors in Thymeleaf. Er is een veelvoorkomende valkuil bij het voorselecteren van waarden, waarvoor we de oplossing hebben laten zien.

Zoals altijd is de code die tijdens de discussie is gebruikt, te vinden op GitHub.