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