我想创建一个包含国家/地区的下拉列表和第二个包含城市的下拉列表,这取决于第一个列表中的选定值。并且应该动态更改城市列表。 在视图(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); }
更多推荐
Thymeleaf地图中的相关下拉列表
发布评论