streamalism.org

1. Oversigt

Thymeleaf er den meget populære skabelonmotor samlet med Spring Boot. Vi har allerede offentliggjort en række artikler om det, og vi kan varmt anbefale at gå igennem Baeldungs ​​Thymeleaf-serie.

I denne vejledning skal vi se på, hvordan man arbejder med Vælg og mulighed tags i Thymeleaf.

2. Grundlæggende HTML

I HTML kan vi oprette en rulleliste med flere værdier:

 Apple Banan Orange Pære 

Hver liste består af Vælg og indlejret mulighed tags. Som standard gengiver webbrowseren en liste med den første mulighed valgt.

Vi kan styre, hvilken værdi der vælges ved hjælp af valgte attribut:

orange

Desuden kan vi specificere, at en indstilling ikke kan vælges ved hjælp af handicappet attribut:

Vælg venligst...

3. Thymeleaf

I Thymleaf kan vi bruge th: felt attribut for at binde visningen med modellen:

Mens ovenstående eksempel ikke rigtigt kræver brug af en skabelonmotor, vil vi i mere avancerede eksempler, der følger, se kraften i Thymeleaf.

3.1. Mulighed Uden valg

Hvis vi tænker på et scenario, hvor der er flere muligheder at vælge imellem, er en ren og pæn måde at vise dem alle ved at bruge th: hver attribut sammen med th: værdi og th: tekst:

I eksemplet ovenfor bruger vi en række af tal fra 0 til 100. Vi tildeler værdien af ​​hvert nummer jeg til mulighed tag værdi attribut, og vi bruger det samme nummer som den viste værdi.

Thymeleaf-koden gengives i browseren som:

 0 1 2 ... 100 

Lad os tænke på dette eksempel som skab, dvs. vi starter med en ny form, og procentværdi behøvede ikke at blive valgt på forhånd.

3.2. Valgte Mulighed

Hvis vi vil udvide vores form nu med en opdatering funktionalitet, dvs. vi går tilbage til den tidligere oprettede post, og vi vil derefter udfylde formularen med eksisterende data indstillingen skal vælges.

Vi kan opnå det ved at tilføje th: valgt attribut sammen med nogle betingelser:

I ovenstående eksempel vil vi forudvælge værdien 75 ved at kontrollere, om jeg er lig med 75.

Imidlertid, denne kode fungerer ikke, og den gengivne HTML vil være:

 0 ... 74 75 76 ... 100 

For at løse det skal vi fjerne th: felt og udskift den med navn og id egenskaber:

I sidste ende får vi:

 0 ... 74 75 76 ... 100 

4. Konklusion

I denne korte artikel har vi tjekket, hvordan vi arbejder med drop-down / listevælgere i Thymeleaf. Der er en fælles faldgrube med forvalgte værdier, som vi har vist løsningen på.

Som altid kan koden, der blev brugt under diskussionen, findes på GitHub.