项目中如果使用Thymeleaf模板引擎，需要经常的对下拉框、单选钮、复选框进行数据的动态绑定。下面将介绍如何使用Thymeleaf动态绑定下拉框、单选钮、复选框的数据。

1、使用Thymeleaf动态绑定

1.1 Select标签的动态绑定（下拉框）

<select name="departmentCode" class="b_select" >
    <option value="">请选择</option>
    <option th:each="item:${departmentList}"
            th:value="${item.value}" th:text="${item.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="${item.text}"></label>
</th:block>

 

2、综合实例

【实例】获取用户信息，使用Thymeleaf绑定用户信息。

实例要求：

1、下拉框中动态绑定部门列表，并选中用户的部门。

2、单选钮动态绑定用户的性别。

3、复选框动态绑定角色列表，并选中用户拥有的角色。

4、获取并绑定用户信息。

执行结果：

（1）引入Thymeleaf依赖

首先创建SpringBoot项目，然后需要引入Thymeleaf依赖。直接在pom.xml文件中加入以下依赖即可。

<!-- 引入Thymeleaf模板引擎 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

（2）配置视图解析器

在application.yml配置文件中，可以配置Thymeleaf模板解析器属性，如以下代码：

spring:
  thymeleaf:
    mode: HTML5
    encoding: UTF-8
    cache: false  #使用Thymeleaf模板引擎，关闭缓存
    servlet:
      content-type: text/html

（3）Entity实体层

创建entity目录（实体层），并创建 UserInfo.class 用户信息实体类。

package com.pjb.entity;

/**
 * 用户信息实体类
 * @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 选项模型类。

package com.pjb.model;

/**
 * 选项模型类
 * @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;
        this.text = text;
        this.value = value;
    }

    public OptionModel(int id,String text,Object value, boolean isChecked)
    {
        this.id = id;
        this.text = text;
        this.value = value;
        this.isChecked = isChecked;
    }

    //省略getter与setter方法...
}

（5）Controller控制器层

创建controller目录（控制器层），并创建 UserController.class 用户控制器类。

package com.pjb.controller;

import com.pjb.entity.UserInfo;
import com.pjb.model.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("https://blog.csdn.net/pan_junbiao");
        userInfo.setSex(1);
        userInfo.setDepartmentCode("1001");
        String[] roleArray = new String[]{"2001","2003"};
        userInfo.setRoleArray(roleArray);
        userInfo.setBlogRemark("您好，欢迎访问 pan_junbiao的博客");

        //关联角色选项
        for(String roleItem : userInfo.getRoleArray())
        {
            for(OptionModel optionItem : roleList)
            {
                if(optionItem.getValue().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="http://www.thymeleaf.org">
<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;
            padding: 5px 10px;
        }
        select{
            width: 100px;
            padding: 3px;
        }
    </style>
</head>
<body>
<form action="" method="post" name="myForm">
    <table align="center">
        <caption>用户信息</caption>
        <tr>
            <th>用户姓名：</th>
            <td th:text="${userInfo.userName}"></td>
        </tr>
        <tr>
            <th>博客地址：</th>
            <td th:text="${userInfo.blogUrl}"></td>
        </tr>
        <tr>
            <th>性别：</th>
            <td>
                <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>
            </td>
        </tr>
        <tr>
            <th>部门：</th>
            <td>
                <select name="departmentCode" class="b_select" >
                    <option value="">请选择</option>
                    <option th:each="item:${departmentList}"
                            th:value="${item.value}" th:text="${item.text}"
                            th:selected="${userInfo.departmentCode==item.value}">
                    </option>
                </select>
            </td>
        </tr>
        <tr>
            <th>角色：</th>
            <td>
                <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="${item.text}"></label>
                </th:block>
            </td>
        </tr>
        <tr>
            <th>博客信息：</th>
            <td th:text="${userInfo.blogRemark}"></td>
        </tr>
        <!-- 以下是提交、取消按钮 -->
        <tr>
            <td colspan="2" style="text-align: center; padding: 5px;">
                <input class="b_button" type="submit" value="提交" />
                <input class="b_button" type="reset" value="重置" />
            </td>
        </tr>
    </table>
</form>
</body>
</html>