javascript - Thymeleaf map 中的相关下拉列表

Question

我想创建一个包含国家的下拉列表和第二个包含城市的下拉列表，这取决于第一个列表中的选定值。并且城市列表应该动态更改。在 View (Thymeleaf) 中，我有一个 Map<CountryModel, Set<RegionModel>>从 Controller 。 CountryModel 的名称应显示在第二个下拉列表中，Set 应显示在第二个(从属)下拉列表中。
这里我创建了第一个下拉列表:

 <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>

那么如何根据第一个列表中选定的国家/地区创建第二个下拉列表呢？

Answer 1

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

1. 更改 Map<CountryModel, Set<RegionModel>>至 Map<String, Set<String>>

2. 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);
           });
       });
   };
   

3. 使用 sendAjaxRequest()当我更改第一个下拉列表时。

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

4. Thymeleaf 模板中的下拉列表

第一个下拉列表

<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. Controller

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