如何在 Thymeleaf 中使用复选框实现多选下拉并将所选值显示到 Spring 控制器

Question

带有复选框示例的多选下拉菜单：

如何将下面的 html 代码转换为 thymeleaf 以在 Spring 控制器中显示

选择爱好类型：

 <form action="#" th:action="@{/display}" method="POST">
 <div class="container">
	<p><strong>Select Hobbies(Multiple):</strong>
    <select id="multiple-hobbies" multiple="multiple">
        <option value="reading">Reading</option>
        <option value="cricket">Cricket</option>
        <option value="cooking">Cooking</option>
        <option value="movies">Watching Movies</option>
        <option value="music">Listening Music</option>
        <option value="sleeping">Sleeping</option>
    </select>
    </p>
     <input type="submit" value="submit"/>
</div>
    
    
       </form>

Answer 1

我实现了以下，它成功了

   
 <form action="#" th:action="@{/display}"  th:object="${hobbyobj}" method="POST">
 <div class="container">
  
     <p><strong>Select Hobbies(Multiple):</strong>
    <select id="multiple-hobbies" th:field="*{hobbieslist}" multiple="multiple">
   
    <option th:each="hobby: ${predefinedhobbylist}"
              th:value="${hobby}" th:text="${hobby}">
    </select>
    </p>
     <input type="submit" value="submit"/>
</div>    
   </form>

控制器类实现：

  @Controller

公共类 HobbiesController {

private static final Logger logger = LoggerFactory.getLogger(HobbiesController.class);  


@GetMapping("/")
public ModelAndView smartphoneselect(Model model) {

     ModelAndView mav = new ModelAndView();
     mav.setViewName("index.html");
     mav.addObject("hobbyobj",new Hobby());
     mav.addObject("predefinedhobbylist", gethobbieslist());
     return mav;
}

@PostMapping("/display")
public ModelAndView hobbiesdisplay(@ModelAttribute Hobby hobby) {

     ModelAndView mav = new ModelAndView();

     mav.setViewName("display.html");

     logger.info("Hobbies Selected:"+hobby.getHobbieslist());

      mav.addObject("hobbiesselected",hobby.getHobbieslist()); 

      return mav;        
}

public List<String> gethobbieslist(){
    List<String> hobbieslist=new ArrayList<String>();
      hobbieslist.add("Reading");
      hobbieslist.add("Cricket"); 
      hobbieslist.add("Cooking");
      hobbieslist.add("Sleeping");
      hobbieslist.add("Waching Movies");
      hobbieslist.add("Listening Music");     

     return hobbieslist;
    }   
}

模型类实现为：

public class Hobby {
private List<String> hobbieslist;

public List<String> getHobbieslist() {
    return hobbieslist;
}

public void setHobbieslist(List<String> hobbieslist) {
    this.hobbieslist = hobbieslist;
}

}

Answer 2

您始终可以发送带有所选值的字符串列表，并检查每个值是否包含在该列表#lists.contains(list, searchedValue) 中。这个列表可以从控制器发送到模型，使用model.addAttributes("list", list)。现在，在您的模型上，您可以使用th:selected 来决定是否应该选择该选项。例如。

<select id="multiple-hobbies" multiple="multiple">
   <option th:selected="${#lists.contains(list, 'reading')}" value="reading">Reading</option>
   <option th:selected="${#lists.contains(list, 'cricket')}" value="cricket">Cricket</option>
   <!-- THE REST OF THE OPTIONS -->
</select>