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

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足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 下拉选的选中问题 « 帝皇彩票官网大屏数据可视化设计指南 | 经典设计书《简约至上》的精华版读书笔记»


蓝蓝 http://www.bjhbys.com

订阅Rss
迪士尼彩乐园投注 帝皇彩票官网 迪士尼彩乐园 吉利彩票导航 桔子彩票登陆 帝皇彩票官网 山东11选5计划 博发彩票开奖 桔子彩票官网 湖南快乐十分官网