Bekerja dengan Select dan Option di Thymeleaf

1. Ikhtisar

Thymeleaf adalah mesin template yang sangat populer yang digabungkan dengan Spring Boot. Kami telah menerbitkan sejumlah artikel tentangnya, dan kami sangat merekomendasikan untuk membaca seri Thymeleaf Baeldung.

Dalam tutorial ini, kita akan melihat bagaimana kerja dengan pilih dan opsi tag di Thymeleaf.

2. Dasar-dasar HTML

Dalam HTML kita dapat membuat daftar drop-down dengan beberapa nilai:

 Apple Banana Orange Pear 

Setiap daftar terdiri dari tag opsi pilih dan bertingkat . Secara default, browser web akan membuat daftar dengan opsi pertama yang dipilih sebelumnya .

Kita dapat mengontrol nilai mana yang dipilih dengan menggunakan atribut yang dipilih :

Orange

Selain itu, kami dapat menentukan bahwa opsi tidak dapat dipilih dengan menggunakan atribut yang dinonaktifkan :

Please select...

3. Timeleaf

Di Thymleaf kita dapat menggunakan atribut th: field untuk mengikat tampilan dengan model:

Sementara contoh di atas tidak benar-benar memerlukan penggunaan mesin template, dalam contoh yang lebih maju untuk mengikuti kita akan melihat kekuatan Thymeleaf.

3.1. Opsi Tanpa Seleksi

Jika kita berpikir tentang skenario di mana ada lebih banyak pilihan untuk dipilih, cara yang bersih dan rapi untuk menampilkan semuanya adalah dengan menggunakan th: setiap atribut bersama dengan th: nilai dan th: teks :

Dalam contoh di atas, kami menggunakan urutan angka dari 0 hingga 100. Kami menetapkan nilai dari setiap angka i ke atribut nilai tag opsi , dan kami menggunakan angka yang sama dengan nilai yang ditampilkan.

Kode Thymeleaf akan ditampilkan di browser sebagai:

 0 1 2 ... 100 

Mari kita pikirkan contoh ini sebagai create , yaitu, kita mulai dengan bentuk baru, dan nilai persentase tidak perlu dipilih sebelumnya .

3.2. Opsi yang Dipilih

Jika kami ingin memperluas formulir kami sekarang dengan fungsionalitas pembaruan , yaitu, kami kembali ke rekaman yang dibuat sebelumnya, dan kami ingin mengisi formulir dengan data yang ada, maka opsi perlu dipilih .

Kita dapat mencapainya dengan menambahkan atribut th: selected bersama dengan beberapa kondisi:

Dalam contoh di atas, kami ingin memilih nilai 75 dengan memeriksa apakah i sama dengan 75.

Namun, kode ini tidak akan berfungsi, dan HTML yang dirender akan menjadi:

 0 ... 74 75 76 ... 100 

Untuk memperbaikinya, kita perlu menghapus th: field dan menggantinya dengan atribut name dan id :

Akhirnya kita akan mendapatkan:

 0 ... 74 75 76 ... 100 

4. Kesimpulan

Dalam artikel singkat ini, kami telah memeriksa cara bekerja dengan pemilih drop-down / list di Thymeleaf. Ada satu kesalahan umum dengan nilai pra-pemilihan, yang telah kami tunjukkan solusinya.

Seperti biasa, kode yang digunakan selama diskusi dapat ditemukan di GitHub.