Arbeide med Select og Option i Thymeleaf
1. Oversikt
Thymeleaf er den veldig populære malmotoren som er pakket sammen med Spring Boot. Vi har allerede publisert en rekke artikler om det, og vi anbefaler på det sterkeste å gå gjennom Baeldungs Thymeleaf-serie.
I denne opplæringen skal vi se på hvordan vi kan jobbe med å velge og alternativ tagger i Thymeleaf.
2. Grunnleggende om HTML
I HTML kan vi lage en rullegardinliste med flere verdier:
Apple Banana Orange Pear
Hver liste består av å velge og nestet alternativ koder. Som standard vil nettleseren gjengi en liste med det første alternativet som er valgt på forhånd.
Vi kan kontrollere hvilken verdi som velges ved å bruke valgt Egenskap:
oransje
Videre kan vi spesifisere at et alternativ ikke kan velges ved å bruke funksjonshemmet Egenskap:
Vennligst velg...
3. Thymeleaf
I Thymleaf kan vi bruke th: felt attributt for å binde visningen med modellen:
Selv om eksemplet ovenfor egentlig ikke krever bruk av en malmotor, vil vi i mer avanserte eksempler å følge kraften til Thymeleaf.
3.1. Alternativ Uten utvalg
Hvis vi tenker på et scenario der det er flere alternativer å velge mellom, er en ren og pen måte å vise dem alle på ved å bruke th: hver attributt sammen med th: verdi og th: tekst:
I eksemplet ovenfor bruker vi en sekvens av tall fra 0 til 100. Vi tilordner verdien til hvert tall Jeg til alternativ tag's verdi attributt, og vi bruker samme nummer som den viste verdien.
Thymeleaf-koden blir gjengitt i nettleseren som:
0 1 2 ... 100
La oss tenke på dette eksemplet som skape, dvs. vi starter med en ny form, og prosentverdi behøvde ikke å være valgt på forhånd.
3.2. Valgt Alternativ
Hvis vi ønsker å utvide formen vår med en Oppdater funksjonalitet, dvs. vi går tilbake til den tidligere opprettede posten, og vi vil fylle ut skjemaet med eksisterende data alternativet må velges.
Vi kan oppnå det ved å legge til th: valgt attributt sammen med noen tilstand:
I eksemplet ovenfor ønsker vi å forhåndsvelge verdien 75 ved å sjekke om Jeg er lik 75.
Derimot, denne koden vil ikke fungere, og den gjengitte HTML vil være:
0 ... 74 75 76 ... 100
For å fikse det, må vi fjerne th: felt og erstatt den med Navn og id attributter:
Til slutt vil vi få:
0 ... 74 75 76 ... 100
4. Konklusjon
I denne korte artikkelen har vi sjekket hvordan vi kan jobbe med rullegardin- / listevelgere i Thymeleaf. Det er en vanlig fallgruve med forhåndsvalgte verdier, som vi har vist løsningen på.
Som alltid kan koden som ble brukt under diskusjonen finnes på GitHub.