一篇解决 thymeleaf 下拉选的选中问题

说明：本文基于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！