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

页面部分代码：

                        

                            所在省
                            

                                
                                    选择所在的省份
                                     
                                        ${item.name}
                                    
                                
                            
                        
                    

                    

                        

                            所在市
                            

                                
                                    请选择所在的市
                                
                            
                        
                    

                    

                        

                            所在区/县
                            

                                    
                                        请选择所在的区/县
                                    
                            
                        
                    

后台查询数据 前台用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[i].name + '')
              };
                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[i].name + '')
                };
            });
        }
        $("#area").empty();
    }

    function defaultNext(name) {
        $.post("/city/defaultNext",{"name":name},function (data) {
            for(var i=0; i' + data[i].name + '')
            };
        });
        $("#area").empty();
    }

后台部分代码：

    @RequestMapping(value = "/chooseMarket")
    @ResponseBody
    public List  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  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 defaultNext(HttpServletRequest request,@RequestParam String name){
        ParamMap paramMap=new ParamMap(request);
        paramMap.put("parentId", cityService.selectByName(name).getId());
        return  cityService.chooseNext(paramMap);
    }

可以实现的效果，如图