2019-10-21 seo达人
说明：本文基于thymeleaf3.x
在做后台系统时多多少少都会遇到下拉选回显的问题，本次就总结一下如何利用thymeleaf简单快速的进行下拉选的回显。
两种情况：
1、下拉选的数据固定死了的情况下？
利用 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">数据库</option>
<option value="3">操作系统</option>
<option value="4">办公软件</option>
<option value="5">图形处理与多媒体</option>
</select>
book是请求域中的实体类，当${book.bookKind}的值和 option 的 value值匹配上后，该option就会被选中。
怎么样是不是很简单？如果是用ajax的话，还要先获取所有的option，循环遍历，判断value值是否相等，设置selected属性值为true，跳出循环，这一系列操作，thymeleaf一个属性值就搞定，所以孰轻孰重您就看着来吧！哈哈！
2、下拉选的数据没固定死时？
两个属性 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、先后台获取数据后，循环append(html标签) 2、再获取到当前记录的这列属性值，再获取到 1 中循环设置的option，在比对value值，设置选中，break等。而且第一个ajax还要整成同步的，不然 2 中可能获取不到 1 中的option元素。
最后说明：如果恰巧能解决你的问题，那就动一动您的小手，点个赞或者评论一下，让我看到你们，您的点赞或评论将会持续带给我不懈的动力！！！come on baby！Let's go！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。