省市区列表三级联动查询

如果下面没有帮助到你请链接：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>

转载于:https://www.cnblogs.com/duanqiao123/p/8515129.html