省市区列表三级联动查询

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