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

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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档