省級聯動從資料庫獲取資料
阿新 • • 發佈:2018-12-01
主要就是前臺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; } }