Bekerja dengan Select and Option di Thymeleaf

1. Gambaran keseluruhan

Thymeleaf adalah mesin templat yang sangat popular yang digabungkan bersama Spring Boot. Kami telah menerbitkan sejumlah artikel mengenainya, dan kami sangat mengesyorkan membaca siri Baeldung's Thymeleaf.

Dalam tutorial ini, kita akan melihat bagaimana untuk bekerja dengan pilih dan pilihan tag dalam Thymeleaf.

2. Asas HTML

Dalam HTML kita dapat membuat senarai drop-down dengan pelbagai nilai:

 Apple Banana Orange Pear 

Setiap senarai terdiri daripada tag pilihan terpilih dan bersarang . Secara lalai, penyemak imbas web akan membuat senarai dengan pilihan pertama dipilih .

Kita dapat mengawal nilai mana yang dipilih dengan menggunakan atribut terpilih :

Orange

Selain itu, kita dapat menentukan bahawa pilihan tidak dapat dipilih dengan menggunakan atribut yang dilumpuhkan :

Please select...

3. Penganjur Thymeleaf

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

Walaupun contoh di atas tidak memerlukan penggunaan mesin templat, dalam contoh yang lebih maju untuk diikuti, kita akan melihat kehebatan Thymeleaf.

3.1. Pilihan Tanpa Pilihan

Sekiranya kita memikirkan senario di mana terdapat lebih banyak pilihan untuk dipilih, cara yang bersih dan rapi untuk memaparkan semuanya adalah dengan menggunakan atribut : masing-masing dengan th: nilai dan th: teks :

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

Kod Thymeleaf akan diberikan dalam penyemak imbas sebagai:

 0 1 2 ... 100 

Mari fikirkan contoh ini sebagai membuat , iaitu, kita mulakan dengan bentuk baru, dan nilai peratusan tidak perlu dipilih sebelumnya .

3.2. Pilihan Terpilih

Sekiranya kita ingin memperluas borang kita sekarang dengan fungsi kemas kini , iaitu, kita kembali ke rekod yang dibuat sebelumnya, dan kita ingin mengisi borang dengan data yang ada, maka pilihannya harus dipilih .

Kita dapat mencapainya dengan menambahkan atribut terpilih th bersama beberapa syarat:

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

Walau bagaimanapun, kod ini tidak akan berfungsi, dan HTML yang diberikan akan:

 0 ... 74 75 76 ... 100 

Untuk memperbaikinya, kita perlu membuang medan th: dan menggantinya dengan atribut nama dan id :

Pada akhirnya, kami akan mendapat:

 0 ... 74 75 76 ... 100 

4. Kesimpulan

Dalam artikel pendek ini, kami telah memeriksa cara bekerja dengan pemilih drop-down / senarai di Thymeleaf. Terdapat satu perangkap umum dengan nilai-nilai yang dipilih sebelumnya, yang telah kami tentukan penyelesaiannya.

Seperti biasa, kod yang digunakan semasa perbincangan boleh didapati di GitHub.