因此,我已经解决了AJAX请求和jQuery追加问题。
更改
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()
时,我改变第一个下拉列表中。
$(document).ready(function() { $("#country").change(function() { sendAjaxRequest(); }); });
- Thymeleaf模板上的下拉列表
第一个下拉列表
<td th:text="#{country}"/> <td> <div > <select th:field="*{model.country}" id="country"> <option th:each="country : ${model.countries}" th:value="${country}" th:text="${country}">Wireframe </option> </select> </div> </td>
第二个下拉列表
<td> <div > <select th:field="*{requestModel.region}" 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); }
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)