How to develop cascading dropdowns in spring 4 using thymeleaf - spring

Question

i have a difficulty in developing cascading dropdowns in spring 4 with thymeleaf.
Here is my scenario:
i have 2 dropdowns like state and city. based on state selection, i need to populate city dropdown with corresponding cities for that state.
I am using Spring boot, spring 4 and thymeleaf template for view.
Thanks in advance.

Answer 1

Do you want to Dropdown / List selectors ?
Could I help you now. Please read this article.
Select fields have two parts: the <select> tag and its nested <option> tags. When creating this kind of field, only the <select> tag has to include a th:field attribute, but the th:value attributes in the nested <option> tags will be very important because they will provide the means of knowing which is the currently selected option (in a similar way to non-boolean checkboxes and radio buttons).
Let’s re-build the type field as a dropdown select:
<select th:field="*{type}">
<option th:each="type : ${allTypes}"
th:value="${type}"
th:text="#{${'seedstarter.type.' + type}}">Wireframe</option>
</select>
also you can check this Thymeleaf Website

Answer 2

You can use the appelsiini chained select to implement the cascading dropdown.
template.html
<select th:field="*{state}">
<option value="0">--</option>
<option th:each="state : ${states}" th:value="${state.stateId}" th:text="${state.name}">Florida</option>
</select>
<select th:field="*{city}">
<option value="0">--</option>
</select>
<script type="text/javascript">
$("#city").remoteChained({
parents: "#state",
url: /*[[#{/getStateCityValues}]]*/ ""
});
</script>
Controller.java
#PostMapping("/getStateCityValues")
public #ResponseBody
Map<String, String> getStateCityValues(#RequestParam("state") Integer state) {
Map<String, String> cityValues = new HashMap<>();
List<City> cities = cityService.getStateCities(state);
for(City city : cities){
cityValues.put(String.valueOf(city.getCityId()), city.getName());
}
return cityValues;
}