页面部分代码：
<div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-3">所在省</label> <div class="col-md-9"> <select name="province" required id="province" class="form-control" οnclick="chooseMarket();"> <option selected value="">选择所在的省份</option> <c:forEach var="item" items="${provinces}" varStatus="status"> <option value="${item.name}">${item.name}</option> </c:forEach> </select> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-3">所在市</label> <div class="col-md-9"> <select id="market" name="city" required class="form-control" οnclick="chooseArea();" > <option selected value="">请选择所在的市</option> </select> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label col-md-3">所在区/县</label> <div class="col-md-9"> <select name="county" required id="area" class="form-control"> <option selected value="">请选择所在的区/县</option> </select> </div> </div> </div> 后台查询数据 前台用js遍历（js追加option，并实现联动效果）JS部分代码：
function chooseMarket() { var options=$("#province option:selected"); if(options.text()!="选择所在的省份"){ $.post("/city/chooseMarket",{"name":options.val()},function (data) { for(var i=0; i<data.length; i++){ $("#market").append('<option value="' + data[i].name + '">' + data[i].name + '</option>') }; var name=data[0].name; defaultNext(name); }); } $("#market").empty(); $("#area").empty(); } function chooseArea() { var options=$("#market option:selected"); if(options.text()!="请选择所在的市"){ $.post("/city/chooseArea",{"name":options.val()},function (data) { for(var i=0; i<data.length; i++){ $("#area").append('<option value="' + data[i].name + '">' + data[i].name + '</option>') }; }); } $("#area").empty(); } function defaultNext(name) { $.post("/city/defaultNext",{"name":name},function (data) { for(var i=0; i<data.length; i++){ $("#area").append('<option value="' + data[i].name + '">' + data[i].name + '</option>') }; }); $("#area").empty(); } 后台部分代码： @RequestMapping(value = "/chooseMarket") @ResponseBody public List<City> chooseMarket(HttpServletRequest request,@RequestParam String name){ ParamMap paramMap=new ParamMap(request); paramMap.put("parentId", cityService.selectByName(name).getId()); return cityService.chooseNext(paramMap); } @RequestMapping(value = "/chooseArea") @ResponseBody public List<City> chooseArea(HttpServletRequest request,@RequestParam String name){ ParamMap paramMap=new ParamMap(request); paramMap.put("parentId", cityService.selectByName(name).getId()); return cityService.chooseNext(paramMap); } @RequestMapping(value = "/defaultNext") @ResponseBody public List<City> defaultNext(HttpServletRequest request,@RequestParam String name){ ParamMap paramMap=new ParamMap(request); paramMap.put("parentId", cityService.selectByName(name).getId()); return cityService.chooseNext(paramMap); } 可以实现的效果，如图
