主要就是前臺js程式碼,後臺就是根據id直接查詢的

html程式碼

<select style="width:130px" name="provinceCode" id="province">
    <option value="0">--請選擇--</option>
</select>
<select style=" width:130px" id="city" name="cityCode">
    <option value="0">--請選擇--</option>
</select>
<select style=" width:130px" id="area" name="areaCode">
    <option value="0">--請選擇--</option>
</select>

 js程式碼

//頁面載入顯示全部的省
$.ajax({
    url:"${pageContext.request.contextPath}/province/findAllProvince",
    type:"post",
    dataType:"json",
    success:function(data){
        $(data).each(function(a,b){
            if(b.provinceid!=${userComplete.data.provinceCode}){
                $("#province").append("<option value='"+b.provinceid+"'>"+b.province+"</option>");
            }
        });
    },
    error:function(){

    }
});

$("#province").change(function(){
    $("#city").empty();
    $("#area").empty();
    var a = $("#province option:selected").text();
    $("#provinceName").val(a);
    var pId = $("#province").val();
    $("#city").append("<option value='0'>--請選擇--</option>");
    $("#area").append("<option value='0'>--請選擇--</option>");
    $.ajax({
        url:"${pageContext.request.contextPath}/province/findAllCity",
        type:"post",
        dataType:"json",
        data:{"province":pId},
        success:function(data){
            $(data).each(function(a,b){
                $("#city").append("<option value='"+b.cityid+"'>"+b.city+"</option>");
            });
        },
        error:function(){
        }
    });
});

$("#city").change(function(){
    $("#area").empty();
    var pId = $("#city").val();
    var a = $("#city option:selected").text();
    $("#cityName").val(a);
    $("#area").append("<option value='0'>--請選擇--</option>");

    $.ajax({
        url:"${pageContext.request.contextPath}/province/findAllArea",
        type:"post",
        dataType:"json",
        data:{"area":pId},
        success:function(data){
            $(data).each(function(a,b){
                $("#area").append("<option value='"+b.areaid+"'>"+b.area+"</option>");
            });
        },
        error:function(){
        }
    });
});

controller程式碼

 

package com.bgs.controller;

import com.bgs.pojo.City;
import com.bgs.pojo.HatArea;
import com.bgs.pojo.HatCity;
import com.bgs.pojo.HatProvince;
import com.bgs.service.ProvinceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
@RequestMapping("/province")
public class ProvinceController {

    @Autowired
    private ProvinceService provinceService;

    //獲取所有的省資訊
    @RequestMapping ("/findAllProvince")
    @ResponseBody
    public List<HatProvince> findAllProvince(){
        List<HatProvince> allProvince = provinceService.findAllProvince();
        return  allProvince;
    }

    //獲取所有城市資訊
    @RequestMapping("/findAllCity")
    @ResponseBody
    public List<HatCity> findAllCity(Integer province){
        List<HatCity> allCity = provinceService.findAllCity(province);
        return  allCity;
    }

    //獲取所有的縣
    @RequestMapping("/findAllArea")
    @ResponseBody
    public List<HatArea> findAllArea(Integer area){
        List<HatArea> allArea = provinceService.findAllArea(area);
        return allArea;
    }
} 

有什麼問題私聊我