2019-10-21 seo達人
說明:本文基于thymeleaf3.x
在做后臺系統(tǒng)時多多少少都會遇到下拉選回顯的問題,本次就總結一下如何利用thymeleaf簡單快速的進行下拉選的回顯。
兩種情況:
1、下拉選的數(shù)據(jù)固定死了的情況下?
利用 th:field="${要選中的option的value值}" 屬性,如下
<select id="bookKind" name="bookKind" th:field="${book.bookKind}" class="form-control">
<option value="">請選擇書的種類</option>
<option value="1">編程語言</option>
<option value="2">數(shù)據(jù)庫</option>
<option value="3">操作系統(tǒng)</option>
<option value="4">辦公軟件</option>
<option value="5">圖形處理與多媒體</option>
</select>
book是請求域中的實體類,當${book.bookKind}的值和 option 的 value值匹配上后,該option就會被選中。
怎么樣是不是很簡單?如果是用ajax的話,還要先獲取所有的option,循環(huán)遍歷,判斷value值是否相等,設置selected屬性值為true,跳出循環(huán),這一系列操作,thymeleaf一個屬性值就搞定,所以孰輕孰重您就看著來吧!哈哈!
2、下拉選的數(shù)據(jù)沒固定死時?
兩個屬性 th:each="bookKind : ${bookKinds}" th:selected="{bookKind} == ${book.bookKind}" 搞定,如下所示
<select id="bookKind" name="bookKind" class="form-control">
<option th:each="bookKind : ${bookKinds}" th:selected="{bookKind} == ${book.bookKind}"
th:value="${bookKind}" th:text="${bookKind}"></option>
</select>
解釋一下,先th:each遍歷,*{bookKind}代表遍歷出來的元素,判斷與點擊的者一欄的bookKind值是否一樣,如果一樣th:selected的值就為true,然后th:value 設置option的value 值,th:text 設置option的文本值。
試想一下,如果是用ajax會怎么樣?1、先后臺獲取數(shù)據(jù)后,循環(huán)append(html標簽) 2、再獲取到當前記錄的這列屬性值,再獲取到 1 中循環(huán)設置的option,在比對value值,設置選中,break等。而且第一個ajax還要整成同步的,不然 2 中可能獲取不到 1 中的option元素。
最后說明:如果恰巧能解決你的問題,那就動一動您的小手,點個贊或者評論一下,讓我看到你們,您的點贊或評論將會持續(xù)帶給我不懈的動力?。?!come on baby!Let's go!
藍藍設計( m.820esy.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。