Javascript Thymeleaf中映射的相关下拉列表

我想创建一个包含国家的下拉列表，第二个包含城市的下拉列表，这取决于第一个列表中的选定值。城市名单应该动态变化。 在视图（Thymeleaf）中，我有一个来自控制器的

映射。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>


线框

那么，如何创建第二个下拉列表，这取决于第一个列表中选定的国家？
在我们的项目中，我们是这样做的：

<div class="form-group">
    <label class="col-sm-4 control-label" 
           th:text="#{person.edit.policy.tfoms}"></label>

    <div class="col-sm-8">
        <select class="form-control" th:field="*{tfoms}" 
                onchange="loadInsuranceCompanies()">
            <option th:each="t : ${tfomses}" 
                    th:value="${t.uidtfoms}"  
                    th:text="${t.shortName}"
                    th:selected="${personBean.tfoms != null 
                    and personBean.tfoms.equals(t)}">
            </option>
        </select>
    </div>
</div>
<div th:class="${#fields.hasErrors('insuranceCompany')} 
     ? 'form-group has-error' : 'form-group'">
    <label class="col-sm-4 control-label" 
          th:text="#{person.edit.policy.ic}">
    </label>

    <div class="col-sm-8" id="insuranceCompaniesContent">
        <select class="form-control" id="insuranceCompany" 
                name="insuranceCompany"  
                th:fragment="insuranceCompany">
            <option th:each="i : ${insuranceCompanies}" 
                    th:value="${i.uidinsurancecompany}"  
                    th:text="${i.shortName}"
                    th:selected="${personBean.insuranceCompany != null 
                    and personBean.insuranceCompany.equals(i)}">
            </option>
        </select>
        <div th:if="${#fields.hasErrors('insuranceCompany')}" 
         th:each="err : ${#fields.errors('insuranceCompany')}">
        <span class="text-danger" th:text="${err}"></span><br/>
        </div>
    </div>
</div>

最后在控制器中编码：

@RequestMapping(value = "/PersonEdit/insuranceCompanies/{tfoms}", method = RequestMethod.GET)
public String getInsuranceCompaniesByTfoms(@PathVariable("tfoms") Integer tfomsId,
        Model model) {
    model.addAttribute("insuranceCompanies", insuranceCompanyService
            .getInsuranceCompaniesByTfoms(new TerritorialFondOms(tfomsId)));
    return "person/PersonEdit :: insuranceCompany";
}

因此，我用AJAX请求和jQuery追加解决了我的问题

将
Map
更改为
Map

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


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>


线框

第二个下拉列表

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



控制器

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

@RequestMapping（value=“/regions”）
@应答器
公共设置getRegions（@RequestParam字符串国家/地区）{
Map regions=regionsService.getRegions（）；
返回区域。获取（国家）；
}

一旦呈现了页面，并且您希望动态更改dropdow，这将由javascript处理。如果您正在重新加载保存的数据，请查看如何加载预填充的从属列表（即页面加载）？如果我理解您的问题正确-从属输入通过页面加载上的javascript函数加载。从属输入通过
loadInsuranceCompanys
函数加载，但该函数仅在父下拉列表更改时调用。如何使用Angular JS Watch而不是jquery来执行此操作。我的select没有ng模型，因为我使用Thymeleaf，ng更改将需要ng模型。因此，我尝试在Angular中观察元素并触发ajax调用以获取新值