1. 程式人生 > >省市區列表三級聯動查詢

省市區列表三級聯動查詢

如果下面沒有幫助到你請連結: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>