CODEWITHSUNDEEP
springspring-mvcdrop-down-menuhtml-selectthymeleaf
Kingamere
Kingamere

Reputation: 10132

Spring MVC and Thymeleaf - how to retrieve selected value in drop down menu

How do I retrieve the selected value in a drop down menu in Thymeleaf and have the Spring MVC process it?

Here is my thymeleaf code: 

<form style="display:inline-block" th:action="@{/search}" 
      th:object="${searchOptions}" method="get">
    <select id="optionsList" name="optionsListId">
        <option th:each="option : ${searchOptions}"
                th:value="${option.getOption()}"
                th:text="${option.getOptionName()}"
                th:selected="${selectedOptionsList.contains(option.getOption())}">Options</option>
    </select>
</form>

"searchOptions" is the name of a model attribute which is an ArrayList of SearchOptionobjects.

Here is the SearchOptions class:

package formBeans;

public class SearchOption {

    private String option;
    private String optionName;

    public SearchOption() {

    }
    public SearchOption(String option, String optionName) {
        this.option = option;
        this.optionName = optionName;       
    }
    public String getOption() {
        return option;
    }
    public String getOptionName() {
        return optionName;
    }
    public void setOption(String option) {
        this.option = option;
    }
    public void setOptionName(String optionName) {
        this.optionName = optionName;
    }
}

How do I write the code with spring mvc to retrieve the selected value in the drop down box. I have tried finding examples online and they haven't helped.

Thanks

Upvotes: 3

Views: 7170

Answers (1)

S&#233;bastien Temprado
S&#233;bastien Temprado

Reputation: 1463

Controller:

searchOptions only contains data to generate the option elements. selectedOption has to be added to the model before displaying the form and in the submission endpoint. 

@RequestMapping("/myFormPage")
public String myFormPage(
                 Model model, 
                 @ModelAttribute("selectedOption") SearchOption selectedOption) {
    List<SearchOption> searchOptions = new ArrayList<>();
    searchOptions.add(new SearchOption("option1", "optionName1"));
    searchOptions.add(new SearchOption("option2", "optionName2"));
    model.addAttribute("searchOptions", searchOptions);
    return "myFormPage";
}

@RequestMapping("/search")
public String search(
                 @ModelAttribute("selectedOption") SearchOption selectedOption) {
    System.out.println(selectedOption.getOption());
    return "search";
}

HTML:

In the form element, th:object="${selectedOption}" defines the model attribute to use to store submission data. th:field="*{option}" defines the selectedOption's property to use to store the selected value.

<form th:action="@{/search}" th:object="${selectedOption}" th:method="get">
    <select th:field="*{option}">
        <option th:each="option : ${searchOptions}" 
                th:value="${option.getOption()}" 
                th:text="${option.getOptionName()}">Options</option>
    </select>
    <button type="submit">submit</button>
</form>

Upvotes: 2

Related Questions