Select2与Thymeleaf集成：如何将多选选项传递至后端

我用Select2库实现了一个带多选功能的搜索栏，对应的Thymeleaf表单代码如下：

<form th:action="@{/searchuser}" method="post">
   <div th:object="${searchInput}">
   <div class="input-group mb-3">
     <input type="text" th:field="*{key}" class="form-control form-control-lg" placeholder="Search Here">
     <div class="input-group-prepend">
       <span class="input-group-text" type="submit"><i class="fas fa-search"></i></span>
    </div>                
   </div>  
   
    <select class="select2-multiple-choices select2-choice"  multiple="multiple" th:field="*{parameters}">
    <option th:value="'id'" value="id"> Id</option>  
   <option th:value="'First Name'" value="First Name"> First  
      Name</option>
   <option th:value="'Middle Name'"> Middle Name</option>
   <option th:value="'Last Name'" value="Last Name"> Last Name</option>
  <option th:value="'mail'" value="Mail"> E-Mail </option>
    </select>
   </div>
 </div>               

对应的Spring控制器代码：

@RequestMapping(value = "/searchuser", method = RequestMethod.POST)
public ModelAndView searchUser(Locale locale, 
                               @ModelAttribute("searchInput") SearchUserDTO searchdto, 
                               BindingResult searchBindResult,                               
                               Model model) {....}

SearchUserDTO包含String类型的key字段和List<String>类型的parameters字段。现在需要实现将搜索关键词和选中的多选选项正确传递到服务器，请问该怎么处理？

要让Thymeleaf配合Select2把多选选中项正确绑定到后台DTO的List<String>字段，需要做以下几项调整：

1. 修正<option>的th:value属性 #

代码里部分th:value添加了多余的单引号（比如th:value="'id'"），这会导致传递到后台的值变成带单引号的'id'，而非预期的id。需要去掉这些单引号，统一写法：

<option th:value="id" value="id"> Id</option>  
<option th:value="First Name" value="First Name"> First Name</option>
<option th:value="Middle Name"> Middle Name</option>
<option th:value="Last Name" value="Last Name"> Last Name</option>
<option th:value="mail" value="Mail"> E-Mail </option>

Thymeleaf的th:value直接填写字符串值即可，无需额外用引号包裹。

2. 正确初始化Select2插件 #

由于使用了Select2增强多选控件，需要确保页面JS正确初始化该控件，这样选中的选项才能被正常提交到表单：

$(document).ready(function() {
    $('.select2-multiple-choices').select2({
        placeholder: "选择搜索字段", // 可选，添加占位提示文本
        allowClear: true // 可选，允许一键清空选中项
    });
});

Select2会自动处理多选状态下的表单值提交，而Thymeleaf的th:field会自动生成对应后台DTO字段的name属性（比如parameters），Spring MVC能识别这个参数名并绑定到List<String>类型的字段。

3. 确保DTO字段配置正确 #

SearchUserDTO的parameters字段必须具备完整的getter和setter方法，Spring MVC才能完成参数绑定：

public class SearchUserDTO {
    private String key;
    private List<String> parameters;

    // key的getter/setter
    public String getKey() {
        return key;
    }

    public void setKey(String key) {
        this.key = key;
    }

    // parameters的getter/setter
    public List<String> getParameters() {
        return parameters;
    }

    public void setParameters(List<String> parameters) {
        this.parameters = parameters;
    }
}

4. 修复表单提交按钮 #

原代码用<span>作为提交触发元素，虽然加了type="submit"，但<span>并非标准的表单提交控件，建议替换为<button>标签，确保点击能正确触发表单提交：

<div class="input-group-prepend">
    <button class="input-group-text" type="submit"><i class="fas fa-search"></i></button>
</div>

完成以上调整后，提交表单时，选中的多选选项会自动被封装到searchdto.getParameters()列表中，和key字段一起传递到后台控制器。

内容的提问来源于stack exchange，提问作者Discipulos