如何在 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

公共类爱好控制器{

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;
}

}