Spring MVC结合Thymeleaf中控制器传值时下拉框选中值不生效如何解决?
问题根因
th:value属性适配的是单行输入框这类单值元素,设置时会直接将后端值渲染到元素的原生value属性上,所以person输入框能正常显示Nancy<select>是包含多个子<option>的容器元素,本身没有承载选中值的原生语义,选中状态完全由内部对应值的<option>的selected属性决定。直接在<select>上写th:value,Thymeleaf只会生成一个无实际作用的value属性在select标签上,不会触发内部option的选中匹配逻辑,最终浏览器会按照默认行为选中第一个option(也就是Male)。
修正方法
两种可选实现,任选其一即可:
- 方法一:为每个option单独配置选中判断
删掉select标签上多余的th:value,给每个option添加th:selected判断,比对当前option的value值与后端传入的gender值,匹配时自动追加selected属性,代码如下:<input type="text" name="person" th:value="${person}"> <select name="gender" id="gender"> <option value="Male" th:selected="${gender == 'Male'}">Male</option> <option value="Female" th:selected="${gender == 'Female'}">Female</option> </select> - 方法二:使用Thymeleaf表单绑定逻辑自动匹配
将select标签上的th:value替换为th:field,Thymeleaf针对<select>的th:field有专属处理逻辑:会自动遍历所有内部option,比对option的value与绑定的后端变量值,匹配项自动设置为选中态,无需手动写判断逻辑,代码如下:
注:使用th:field时Thymeleaf会自动生成与绑定变量同名的name属性,手动添加的name="gender"不会产生冲突。<input type="text" name="person" th:value="${person}"> <select name="gender" id="gender" th:field="${gender}"> <option value="Male">Male</option> <option value="Female">Female</option> </select>
内容的提问来源于stack exchange,提问作者jkfe
相关产品推荐
相关产品推荐

