SpringBoot使⽤Thymeleaf动态绑定下拉框、单选钮、复选框项⽬中如果使⽤Thymeleaf模板引擎，需要经常的对下拉框、单选钮、复选框进⾏数据的动态绑定。下⾯将介绍如何使⽤Thymeleaf动态绑定下拉框、单选钮、复选框的数据。
1、使⽤Thymeleaf动态绑定
1.1 Select标签的动态绑定（下拉框）
<select name="departmentCode" class="b_select" >
<option value="">请选择</option>htmlradio多选怎么用
<option th:each="item:${departmentList}"
th:value="${item.value}" th:text="${}"
th:selected="${userInfo.departmentCode==item.value}">
</option>
</select>
1.2 Radio标签的动态绑定（单选钮）
<input id="male" name="sex" type="radio" value="1" th:checked="${userInfo.sex==1}"/>
<label for="male">男</label>
<input id="female" name="sex" type="radio" value="2" th:checked="${userInfo.sex==2}"/>
<label for="female">⼥</label>
<input id="secrecy" name="sex" type="radio" value="3" th:checked="${userInfo.sex==3}"/>
<label for="secrecy">保密</label>
1.3 Checkbox标签的动态绑定（复选框）
<th:block th:each="item:${roleList}">
<input th:id="'role_' + ${item.id}" name="roleArray" type="checkbox"
th:value="${item.value}" th:checked="${item.isChecked}">
<label th:for="'role_' + ${item.id}" th:text="${}"></label>
</th:block>
2、综合实例
【实例】获取⽤户信息，使⽤Thymeleaf绑定⽤户信息。
实例要求：
1、下拉框中动态绑定部门列表，并选中⽤户的部门。
2、单选钮动态绑定⽤户的性别。
3、复选框动态绑定⾓⾊列表，并选中⽤户拥有的⾓⾊。
4、获取并绑定⽤户信息。
执⾏结果：
（1）引⼊Thymeleaf依赖
⾸先创建SpringBoot项⽬，然后需要引⼊Thymeleaf依赖。直接在l⽂件中加⼊以下依赖即可。
<!-- 引⼊Thymeleaf模板引擎 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
（2）配置视图解析器
在l配置⽂件中，可以配置Thymeleaf模板解析器属性，如以下代码：
spring:
thymeleaf:
mode: HTML5
encoding: UTF-8
cache: false  #使⽤Thymeleaf模板引擎，关闭缓存
servlet:
content-type: text/html
（3）Entity实体层
创建entity⽬录（实体层），并创建 UserInfo.class ⽤户信息实体类。
* ⽤户信息实体类
* @author pan_junbiao
**/
public class UserInfo
{
//⽤户姓名
private String userName;
//博客地址
private String blogUrl;
//性别（1：男；2：⼥；3：保密）
private int sex;
//部门编号
private String departmentCode;
//⾓⾊数组
private String[] roleArray;
//博客信息
private String blogRemark;
//省略getter与setter⽅法...
}
（4）Model模型层
创建model⽬录（模型层），并创建 OptionModel.class 选项模型类。
* 选项模型类
* @author pan_junbiao
**/
public class OptionModel
{
public Object id; //编号
public String text; //⽂本
public Object value; //值
public boolean isChecked; //是否选中
public OptionModel(int id,String text,Object value)
{
this.id = id;
< = text;
this.value = value;
}
public OptionModel(int id,String text,Object value, boolean isChecked)
{
this.id = id;
< = text;
this.value = value;
this.isChecked = isChecked;
}
/
/省略getter与setter⽅法...
}
（5）Controller控制器层
创建controller⽬录（控制器层），并创建 UserController.class ⽤户控制器类。package ller;
import ity.UserInfo;
import del.OptionModel;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.List;
/**
* ⽤户控制器
* @author pan_junbiao
**/
@Controller
@RequestMapping("user")
public class UserController
{
/**
* 获取⽤户信息
*/
@RequestMapping("/getUserInfo")
public ModelAndView getUserInfo()
{
//获取部门列表
List<OptionModel> departmentList = new ArrayList<OptionModel>();
departmentList.add(new OptionModel(1, "研发部", "1001"));
departmentList.add(new OptionModel(2, "⼈事部", "1002"));
departmentList.add(new OptionModel(3, "财务部", "1003"));
//获取⾓⾊列表
List<OptionModel> roleList = new ArrayList<OptionModel>();
roleList.add(new OptionModel(1, "系统管理员", "2001"));
roleList.add(new OptionModel(2, "⼈事管理员", "2002"));
roleList.add(new OptionModel(3, "财务管理员", "2003"));
//⽤户信息
UserInfo userInfo = new UserInfo();
userInfo.setUserName("pan_junbiao的博客");
userInfo.setBlogUrl("blog.csdn/pan_junbiao");
userInfo.setSex(1);
userInfo.setDepartmentCode("1001");
String[] roleArray = new String[]{"2001","2003"};
userInfo.setRoleArray(roleArray);
userInfo.setBlogRemark("您好，欢迎访问 pan_junbiao的博客");
/
/关联⾓⾊选项
for(String roleItem : RoleArray())
{
for(OptionModel optionItem : roleList)
{
Value().equals(roleItem))
{
optionItem.setChecked(true);
break;
}
}
}
//返回结果
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("departmentList",departmentList);
modelAndView.addObject("roleList",roleList);
modelAndView.addObject("userInfo",userInfo);
modelAndView.setViewName("user_info.html");
return modelAndView;
}
}
（6）View表现层
在resources/templates⽬录下，创建 user_info.html ⽤户信息显⽰页⾯。
<!DOCTYPE html>
<html lang="en" xmlns:th="">
<head>
<meta charset="UTF-8">
<title>⽤户信息</title>
<meta name="author" content="pan_junbiao的博客">
<style>
table{
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-collapse: collapse; /*设置单元格的边框合并为1*/
}
th{
text-align: right;
}
th, td{
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。