1. 程式人生 > >thymeleaf的下拉框(select option)回顯選中

thymeleaf的下拉框(select option)回顯選中

在開發一個足球聯賽管理系統中,需要在修改頁面使用thymeleaf模板引擎先從資料庫中取出資料顯示在頁面中,然後再對要修改的資料分別進行修改。 
在input或者textarea的回顯都沒有什麼問題,只要之前傳了物件過來,那麼就在input標籤里加上例如th:value="*{startDate}"即可,那麼輸入框裡變會顯示資料庫中已有的資料,點選後可進行修改。 
但是select標籤相對會特殊一點,我們需要進行一個判斷,判斷資料庫中選中的是哪個option,然後在回顯頁面將它預設選中,同時點選下拉框後還可以選中修改成其它選項。 
因為我剛開始對thymeleaf模板引擎不是很熟悉,所以在網上找了很多方案,也一個一個試了,很多對於我這個程式並沒有作用,但是這裡也都列出來作為一個解決方案的參考。

解決方案一

使用switch+case的方式進行判斷 
switch+case
下拉框回顯1 
下拉框回顯2 
可以看到,雖然的確從資料庫中取出了資料庫中已儲存的值並顯示到頁面中並且已選中,但是下拉框中其他的選項卻並沒出現。這樣就無法修改該屬性。所以這個方法對我這個程式並不適用,當然也可能我程式哪裡寫的有問題。

解決方案二

使用th:if進行判斷 
th:if
下拉框回顯1 
下拉框回顯2 
和上一種方式是一樣的效果,同樣從資料庫中獲取到了已有資料顯示在頁面中並選中,但是下拉框中其他的選項不出現。我懷疑可能還是我的程式漏寫了某個部分。

最終成功的解決方案

首先不進行判斷,先顯示出所有的選項,保證可以進行修改的操作。然後再在selected這個屬性裡進行判斷,從資料庫中獲取的值是否等於該選項的value,如果等於,則選中。 
這裡寫圖片描述


成功的回顯頁面 
可以看到,最終的效果就是首先預設是資料中已有的資料,並且是選中狀態。然後下拉框中有其他的選項可以選中從而完成修改操作。