A Select and Option használata a Thymeleaf-ben

1. Áttekintés

A Thymeleaf a nagyon népszerű sablonmotor, amely a Spring Boot csomagban van. Számos cikket publikáltunk már róla, és nagyon ajánljuk, hogy nézze át a Baeldung Thymeleaf sorozatát.

Ebben az oktatóanyagban azt fogjuk megvizsgálni, hogyan kell vele dolgozni válassza és választási lehetőség címkék a Thymeleaf-ben.

2. HTML alapok

HTML-ben legördülő listát készíthetünk, több értékkel:

 Almás banán narancs körte 

Minden lista a következőkből áll válassza és beágyazott választási lehetőség címkék. Alapértelmezés szerint a webböngésző listát jelenít meg az első opcióval.

A használatával szabályozhatjuk, hogy melyik érték legyen kiválasztva kiválasztott tulajdonság:

narancs

Ezenkívül megadhatjuk, hogy egy opció nem választható ki a Tiltva tulajdonság:

Kérlek, válassz...

3. Tüvelevél

A Thymleaf-ben használhatjuk th: mező attribútum a nézet és a modell összekapcsolásához:

Bár a fenti példa valójában nem igényli a sablonmotor használatát, a fejlettebb példákban a Thymeleaf erejét láthatjuk.

3.1. választási lehetőség Kiválasztás nélkül

Ha egy olyan forgatókönyvre gondolunk, amelyben több lehetőség közül választhat, akkor mindegyik megjelenítésének tiszta és tiszta módja az th: mindegyik attribútummal együtt th: érték és th: szöveg:

A fenti példában 0 és 100 közötti számsorozatot használunk. Minden számhoz hozzárendeljük az értéket én nak nek választási lehetőség címkék érték attribútumot, és ugyanazt a számot használjuk, mint a megjelenített érték.

A Thymeleaf kód a böngészőben a következőképpen jelenik meg:

 0 1 2 ... 100 

Gondoljuk át ezt a példát teremt, azaz új formával indulunk, és a a százalékos értéket nem kellett előre kiválasztani.

3.2. Kiválasztott választási lehetőség

Ha most bővíteni akarjuk formánkat egy frissítés funkcionalitás, azaz visszatérünk a korábban létrehozott rekordra, és akkor az űrlapot meg akarjuk tölteni meglévő adatokkal az opciót ki kell választani.

Ezt hozzáadással érhetjük el th: kiválasztva attribútum néhány feltétellel együtt:

A fenti példában a 75 értékét szeretnénk előre kiválasztani, ellenőrizve, hogy én 75-tel egyenlő.

Azonban, ez a kód nem fog működni, és a renderelt HTML a következő lesz:

 0 ... 74 75 76 ... 100 

A javításhoz el kell távolítanunk th: mező és cserélje le név és id attribútumok:

Végül a következőket kapjuk:

 0 ... 74 75 76 ... 100 

4. Következtetés

Ebben a rövid cikkben megvizsgáltuk, hogyan kell működni a Thymeleaf legördülő / lista választóival. Van egy közös buktató az előre kiválasztott értékekkel, amelyekre megmutattuk a megoldást.

Mint mindig, a vita során használt kód megtalálható a GitHubon.