Thymeleaf地图中的相关下拉列表

本文介绍了Thymeleaf地图中的相关下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想创建一个包含国家/地区的下拉列表和第二个包含城市的下拉列表，这取决于第一个列表中的选定值。并且应该动态更改城市列表。 在视图（Thymeleaf）中，我从控制器获得了 Map< CountryModel，Set< RegionModel>> 。 CountryModel的名称应显示在第二个下拉列表中，Set应显示在第二个（从属）下拉列表中。 这里我创建了第一个下拉列表：

I want to create a drop-down list with countries and the second drop-down list with cities, which depends on selected value in the first list. And the list of cities should be changed dynamically. In the view (Thymeleaf) I have a Map<CountryModel, Set<RegionModel>> from controller. CountryModel's name should be shows in the second drop-down list, and Set should be shows in the second(dependent) drop-down list. Here I create first drop-down list:

<tr> <td th:text="#{country}"/> <td> <div class="form-group"> <select th:field="*{transferRequestModel.country}" class="form-control" id="country"> <option th:each="country : ${transferModel.countries}" th:value="${country}" th:text="${country.key.countryName}">Wireframe </option> </select> </div> </td> </tr>

那么如何创建第二个下拉列表，该列表取决于第一个列表中的选定国家？

So how to create second drop-down list which depends on selected country in the first list?

推荐答案

所以我用AJAX请求和jQuery附加解决了我的问题。

So I have solved my problem with AJAX request and jQuery append.

将 Map< CountryModel，Set< RegionModel>> 改为 Map< String，Set< String> >

AJAX请求

function sendAjaxRequest() { var country = $("#country").val(); $.get( "/regions?country=" + country, function( data ) { $("#region").empty(); data.forEach(function(item, i) { var option = "<option value = " + item + ">" + item + "</option>"; $("#region").append(option); }); }); };

使用 sendAjaxRequest（）时我改变了第一个下拉列表。

Use sendAjaxRequest() when i change first drop-down list.

$(document).ready(function() { $("#country").change(function() { sendAjaxRequest(); }); });

Thymeleaf模板下拉列表

Drop-down list at the Thymeleaf template

第一个下拉列表

<td th:text="#{country}"/> <td> <div class="form-group"> <select th:field="*{model.country}" class="form-control" id="country"> <option th:each="country : ${model.countries}" th:value="${country}" th:text="${country}">Wireframe </option> </select> </div> </td>

第二个下拉列表

<td> <div class="form-group"> <select th:field="*{requestModel.region}" class="form-control" id="region"> </select> </div> </td>

控制器

Controller @RequestMapping(value = "/regions") @ResponseBody public Set getRegions(@RequestParam String country) { Map<String, Set<String>> regions = regionsService.getRegions(); return regions.get(country); }