工作中的技术总结_ thymeleaf的应用 _select&input的数据回显 _20210910

工作中的技术总结_ thymeleaf的应用 _select&input的数据回显 _20210910

在需要用户输入的场合，常常会有对用户填入数据的验证，对数据的验证不通过则需要返回到表单页面，这时候就需要把用户输入过的内容在表单上重新显示出来让用户进行处理。今天就把关于 select 下拉列表和 input 输入框的 数据回显 处理方法总结在此

1、input的数据回显处理

input 控件的 数据回显比较容易 只需要 用 th:value 和表单对象的 属性进行绑定就可以

<input type="hidden" id="UserName" th:value="${user.userName}">

2、select

这是一个单选下拉框的情况，数据的回显则是设置了一个隐藏域，用来保存表单对象指定属性的值，还需要编写jQuery语句触发该 select 选中指定值的选项（下拉选项是 通过jQuery的ajax输出的，需要的话也可以 写静态的选项来进行验证）

<select name="userTypeName" id="userTypeName"
        placeholder="用户类型选择" style="width: 100%">
    <option value=""></option>
</select>

<input type="hidden" id="choosingUserTypeName" th:value="${user.userTypeName}">
<script>
			var choosingUserTypeName = $("#choosingUserTypeName").val();
			$("#userTypeName").val(choosingUserTypeName).trigger("change");
</script>

表单对象需要在返回页面时存入model，上面的一系列操作才能起作用

model.addAttribute("user", user);
return "user/login";