用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"  ο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);
    }

可以实现的效果，如图