一篇解决 thymeleaf 下拉选的选中问题 - 蓝蓝设计_UI设计公司

帝皇彩票官网

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

2019-10-21 释然 前端及开发文章及欣赏

说明:本文基于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.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

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

Powered by sitemap
博发彩票登陆 疯狂斗牛 欢乐斗牛 吉利彩票计划 吉利彩票导航 大象彩票登入 博发彩票开户 桔子彩票网址 聚发彩票投注 大象彩票计划