Lavorare con Select e Option in Thymeleaf

1. Panoramica

Thymeleaf è il popolare motore di creazione di modelli in bundle con Spring Boot. Abbiamo già pubblicato una serie di articoli a riguardo e consigliamo vivamente di esaminare la serie Thymeleaf di Baeldung.

In questo tutorial, vedremo come lavorare con i tag select e option in Thymeleaf.

2. Fondamenti di HTML

In HTML possiamo costruire un elenco a discesa con più valori:

 Apple Banana Orange Pear 

Ogni elenco è costituito da tag di opzione di selezione e nidificati . Per impostazione predefinita, il browser Web visualizzerà un elenco con la prima opzione preselezionata .

Possiamo controllare quale valore è selezionato utilizzando l' attributo selezionato :

Orange

Inoltre, possiamo specificare che un'opzione non è selezionabile utilizzando l' attributo disabilitato :

Please select...

3. Foglia di timone

In Thymleaf possiamo usare l' attributo th: field per legare la vista al modello:

Sebbene l'esempio sopra non richieda davvero l'utilizzo di un motore di modelli, negli esempi più avanzati da seguire vedremo la potenza di Thymeleaf.

3.1. Opzione senza selezione

Se pensiamo a uno scenario in cui ci sono più opzioni tra cui scegliere, un modo pulito e ordinato per visualizzarle tutte è usare th: each attributo insieme a th: value e th: text :

Nell'esempio di cui sopra, stiamo usando una sequenza di numeri da 0 a 100. Si assegna il valore di ogni numero i di opzione del tag valore dell'attributo, e utilizzare lo stesso numero come il valore visualizzato.

Il codice Thymeleaf verrà visualizzato nel browser come:

 0 1 2 ... 100 

Pensiamo a questo esempio come a creare , cioè iniziamo con una nuova forma e non è necessario preselezionare il valore percentuale .

3.2. Opzione selezionata

Se vogliamo espandere il nostro modulo ora con una funzionalità di aggiornamento , ovvero torniamo al record creato in precedenza e vogliamo popolare il modulo con i dati esistenti, è necessario selezionare l'opzione .

Possiamo ottenerlo aggiungendo l' attributo th: selected insieme ad alcune condizioni:

Nell'esempio sopra, vogliamo preselezionare il valore di 75 verificando se i è uguale a 75.

Tuttavia, questo codice non funzionerà e l'HTML renderizzato sarà:

 0 ... 74 75 76 ... 100 

Per risolverlo, dobbiamo rimuovere th: field e sostituirlo con gli attributi name e id :

Alla fine, otterremo:

 0 ... 74 75 76 ... 100 

4. Conclusione

In questo breve articolo, abbiamo verificato come lavorare con i selettori a discesa / elenco in Thymeleaf. C'è una trappola comune con la preselezione dei valori, per la quale abbiamo mostrato la soluzione.

Come sempre, il codice utilizzato durante la discussione può essere trovato su GitHub.