如果下面沒有幫助到你請鏈接：http://blog.csdn.net/xuanzhangran/article/details/55049198
查詢的實現的效果如下：
（1）：點擊選擇省份，彈出省份列表。 
（2）：點擊內蒙古，第二個聯動默認為呼和浩特，同樣點擊呼和浩特，下邊出現所有的內蒙的城市，同樣：當點擊任意一個市，區域就會聯動出來。此處略。 
(3):查詢完畢后：頁面依然有查詢的條件。
前台：
<script src="<%=basePath%>js/business/suRegionAddress.js" type="text/javascript">//引入js </script> <script type="text/javascript"> window.onload=function(){ //所在區域聯動列表 setup();//下面有加載的js代碼 } </script> <div class="row"> <span>收貨地址:</span> <select style="WIDTH: 90px;height:30px;" id="province" name="provice" > <option>選擇省份</option> <c:forEach items="${provinceList}" var="province"> <c:if test="${province.name == proviceName }"> <option value="${province.id}" selected="selected">${province.name}</option> </c:if> <c:if test="${province.name != provinceName}"> <option value="${province.id}">${province.name}</option> </c:if> </c:forEach> </select> <select style="WIDTH: 90px;height:30px;" id="city" name="city" > <c:if test="${not empty cityName}"> <option value="${cityName}">${cityName}</option> </c:if> <c:if test="${empty cityName}"> <option value="">選擇城市</option> </c:if> </select> <select style="WIDTH: 90px;height:30px;" id="city" name="city" > <c:if test="${not empty districtName}"> <option value="${districtName}">${districtName}</option> </c:if> <c:if test="${empty districtName}"> <option value="">選擇區域</option> </c:if> </select>
后台：
@RequestMapping("/userList.html") public String businessFpData(Model model, HttpServletRequest request, @RequestParam(value = "provice", required = false) String proviceName, @RequestParam(value = "city", required = false) String cityName, @RequestParam(value = "city", required = false) String districtName, @RequestParam(value="pageNo",defaultValue="1")Integer pageNo) { Map<String, Object> map = new HashMap<String, Object>(); if(StringUtils.isBlank(proviceName) || proviceName.equals("選擇省份")){ proviceName = null; }else{ SuRegion provice =(SuRegion)regionServer.selectByPrimaryKey(Long.parseLong(proviceName)); proviceName = provice.getName(); } if(StringUtils.isBlank(cityName)|| cityName.equals("選擇城市")){ cityName = null; }else{ if(isNumeric(cityName)){//是數字 SuRegion city =(SuRegion)regionServer.selectByPrimaryKey(Long.parseLong(cityName)); cityName = city.getName(); } } if(StringUtils.isBlank(districtName)|| districtName.equals("選擇城市")){ districtName = null; }else{ if(isNumeric(districtName)){//是數字 SuRegion district =(SuRegion)regionServer.selectByPrimaryKey(Long.parseLong(districtName)); districtName = district.getName(); } } map.put("proviceName", proviceName); map.put("cityName", cityName); map.put("districtName", districtName); List<SuUser> list = userService.userList(map);//查詢 //查詢之后查詢條件返回保存到頁面 model.addAttribute("proviceName", proviceName); model.addAttribute("cityName", cityName); model.addAttribute("districtName", districtName); //加載進入頁面的時候將所有的省份查出來：方法在下邊的mapping里 model.addAttribute("provinceList", regionServer.getAllProvices());// 獲取省份列 } //根據選中的省份或者城市聯動 /** * 根據省份id獲取城市數據后直接使用@ResponseBody裝成json數據 * * @param id * 省份ID * @param response * @return * @return */ @RequestMapping("/getCityByProvinceId.html") @ResponseBody public String getCityByProvinceId( @RequestParam(value = "id", required = false) Long id) { List<SuRegion> cityList = suRegionServer.getAllCitys(id); return JSON.toJSONString(cityList); } /** * 根據城市id獲取區域數據后直接使用@ResponseBody裝成json數據 * * @param id * @return */ @RequestMapping("/getAreaByCityId.html") @ResponseBody public String getAreaByCityId( @RequestParam(value = "id", required = false) Long id) { List<SuRegion> areaList = suRegionServer.getAllAreas(id); return JSON.toJSONString(areaList); }
js代碼：suRegionAddress.js
/*** * 省市區三級聯動： * 三個下拉列表id分別是：province、city、area * @returns */ function setup() { //獲取城市 $("#province").click(function () { $.ajax({ url: "/business/getCityByProvinceId.html?id="+$("#province").val(), type: "POST", dataType:'json', success:function(data){ $("#city").empty(); //清空下拉列表 $.each(data,function(i,item){ $("#city").append(" <option value='" + item.id + "'>" + item.name + "</option>"); }); } }); }); //獲取區縣 $("#city").click(function () { $.ajax({ url: "/business/getAreaByCityId.html?id="+$("#city").val(), type: "POST", dataType:'json', success:function(data){ $("#area").empty(); //清空下拉列表 $.each(data,function(i,item){ $("#area").append(" <option value='" + item.id + "'>" + item.name + "</option>"); }); } }); }); }
mapping的sql語句
<!-- 獲取省份列表 --> <select id="getAllProvices" resultMap="BaseResultMap" parameterType="com.idorabox.entity.SuRegion"> select <include refid="Base_Column_List" /> from tbl_su_region where grade = 1 </select> <select id="getAllCitys" resultMap="BaseResultMap" parameterType="com.idorabox.entity.SuRegion"> select <include refid="Base_Column_List" /> from tbl_su_region where grade = 2 <if test="id != null"> and parent = #{id,jdbcType=BIGINT} </if> </select> <!--獲取 區縣列表 --> <select id="getAllAreas" resultMap="BaseResultMap" parameterType="com.idorabox.entity.SuRegion"> select <include refid="Base_Column_List" /> from tbl_su_region where grade = 3 <if test="id != null"> and parent = #{id,jdbcType=BIGINT} </if> </select>