Как реализовать Multi Select Drop Down с флажком в Thymeleaf и отображать выбранные значения на контроллере Spring

Question

Multi Select Drop Down с примером флажка:

Как преобразовать приведенный ниже HTML-код в тимилиф для отображения в Spring controller

Выберите тип хобби:

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