Thymeleaf地图中的相关下拉列表 [英] Dependent drop-down list from map in 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.

1. 将 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>

1. 控制器

1. Controller

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

这篇关于Thymeleaf地图中的相关下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！