用JS实现省市区三级联动 （数据从数据库查出）

页面部分代码：

<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"  onclick="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"   onclick="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);    }

可以实现的效果，如图