java语言、mysql数据库实现省市县三级联动功能

效果图：

HTML代码:

 

<div class="form-group">
                        <label  class="col-sm-3 control-label">报名区域：</label>
                        <div class="col-sm-9">
                            <span class="select-label">省份:</span><select class="form-control" id="pro" name="pro">
                            <!-- <option>-请选择-</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option> -->
                        </select>
                            <span class="select-label">城市:</span><select class="form-control" id="city"  name="city">
                            <!-- <option>-请选择-</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option> -->
                        </select>
                            <span class="select-label">区县:</span><select class="form-control" id="county"  name="county">
                            <!-- <option>-请选择-</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option> -->
                        </select>
                        </div>
   </div>

js代码：

/* 省市县三级联动  */
     $(function(){
        $.ajax({
            type:"POST",
            cache:false,
            url:"/agent/index/areaDate",
            data:{"pid":0},
            //data:{"tree_path":","},
            dataType:"json",
            success:function(data){
                var option='<option>--请选择--</option>';
                //data.date.list.forEach(function(val, index) {
                $.each(data.date,function(i,n){
                
                    option += '<option value="'+n.id+'">'+n.name+'</option>';
                })
                $("#pro").append(option);
            }
        }); 
    
         //市
         $("#pro").change(function(){
            var pid=$(this).val();
            $.ajax({
            type:"POST",
            cache:false,
            url:"/agent/index/areaDate",
            data:{"pid":pid},
            dataType:"json",
            success:function(data){
            //追加本级option前，先清除city和county的option，以免重选时干扰
                $("#city option").remove(); 
                $("#county option").remove();
                var option='<option>--请选择--</option>';
                $.each(data.date,function(i,n){
                    option += '<option value="'+n.id+'">'+n.name+'</option>';
                })
                $("#city").append(option);
            }
            });
        });
        //区/县
        $("#city").change(function(){
            var pid=$(this).val();
            $.ajax({
            type:"POST",
            cache:false,
            url:"/agent/index/areaDate",
            data:{"pid":pid},
            dataType:"json",
            success:function(data){
            //同上
                $("#county option").remove();
                var option='<option>--请选择--</option>';
                $.each(data.date,function(i,n){
                    option += '<option value="'+n.id+'">'+n.name+'</option>';
                })
                $("#county").append(option);
            }
            });
        }); 
    }) 

java代码：

 

    /**
     * 加载省市县三级数据
     * @param request
     * @param model
     * @return      
     * @author: jinchunzhao
     * @throws   
     * @date:   2019年1月21日 上午9:20:54
     */
    @ResponseBody
    @RequestMapping(value="/areaDate",method=RequestMethod.POST)
    public JsonResult areaList(HttpServletRequest request,Model model){
        try {
            LoginAguser loginAguser = SessionApi.getCurrentAguser(request.getSession());
            if (loginAguser == null) {
                request.setAttribute(CoinConfig.WEB_TITLE, "登录");
                return JsonResult.error("登录信息异常，请重新登录", null);
            }
            String pid = request.getParameter("pid");
            List<Area> list = areaService.findByPid(pid);
            return JsonResult.success("success", list);
        } catch (Exception e) {
            logger.error(e.getMessage());
            e.printStackTrace();
            return JsonResult.error("系统异常，无法访问", null);
        }
    }

数据库部分数据：

 

数据库中所有数据：

https://download.csdn.net/download/jinchunzhao123/10931730