1. 程式人生 > >地區選擇三級聯動

地區選擇三級聯動

nds ber select pad 三級聯動 response getc user type

用戶表

CREATE TABLE TS_PTL_USER  (
   "PTL_USER_ID"        NUMBER(11)                      NOT NULL,
   "USERNAME"           VARCHAR2(100),
   "GENDER"             NUMBER(1)                      DEFAULT 0,
   "PASSWORD"           VARCHAR2(40),
   "NICKNAME"           VARCHAR2(80),
   "REAL_NAME"          VARCHAR2
(80), "PHONE" VARCHAR2(100), "RESI_PROV" VARCHAR2(40), "RESI_CITY" VARCHAR2(40), "RESI_DIST" VARCHAR2(40), "ADDR" VARCHAR2(400), "ZIP_CODE" NUMBER(6), "LOGIN_TIME" TIMESTAMP, "STATUS" NUMBER(1) DEFAULT
1, "EMAIL" VARCHAR2(100), "GROUP_ID" NUMBER(11), "BIRTHDAY" VARCHAR2(20), "QQ_NUM" VARCHAR2(20), "MSN_NUM" VARCHAR2(50), "CELLPHONE" VARCHAR2(20), "INTRO_INFO" VARCHAR2(1500), "LOGIN_COUNT" NUMBER(11), "REGISTER_TIME"
TIMESTAMP, CONSTRAINT PK_EB_PTL_USER PRIMARY KEY ("PTL_USER_ID") );

收貨地址表address

CREATE TABLE EB_SHIP_ADDR  (
   SHIP_ADDR_ID         NUMBER(11)                      NOT NULL,
   PTL_USER_ID          NUMBER(11),
   SHIP_NAME            VARCHAR2(80)                    NOT NULL,
   PROVINCE             VARCHAR2(40)                    NOT NULL,
   CITY                 VARCHAR2(40)                    NOT NULL,
   DISTRICT             VARCHAR2(40)                    NOT NULL,
   ZIP_CODE             VARCHAR2(40),
   ADDR                 VARCHAR2(400)                   NOT NULL,
   PHONE                VARCHAR2(60)                    NOT NULL,
   DEFAULT_ADDR         NUMBER(1)                      DEFAULT 0 NOT NULL,
   CONSTRAINT PK_EB_SHIP_ADDR PRIMARY KEY (SHIP_ADDR_ID)
);

地區表(自關聯)

CREATE TABLE EB_AREA  (
   EREA_ID              NUMBER(11)                      NOT NULL,
   PARENT_ID            NUMBER(11),
   EREA_NAME            VARCHAR2(20),
   AREA_LEVEL           NUMBER(2),
   CONSTRAINT PK_EB_AREA PRIMARY KEY (EREA_ID)
);

查詢語句(resultMap :自定義數據屬性(prov_text,city_text,dist_text)在數據庫中沒有對應的屬性,需在實體類中設置)

<resultMap type="com.rl.ecps.model.EbShipAddr" id="selectAddrByUserIdRM" extends="BaseResultMap">
      <result column="prov_text" property="provText"/>
      <result column="city_text" property="cityText"/>
      <result column="dist_text" property="distText"/>
  </resultMap>
  <select id="selectAddrByUserId" parameterType="long" resultMap="selectAddrByUserIdRM">
      select e.area_name  prov_text,
       e1.area_name city_text,
       e2.area_name dist_text,
       t.*
  from eb_ship_addr t, eb_area e, eb_area e1, eb_area e2
 where t.province = e.area_id
   and t.city = e1.area_id
   and t.district = e2.area_id
   and t.ptl_user_id = #{userId}
  </select>

jsp中地址結構

                    <li>
                        <label for="residence"><samp>*</samp>地  址:</label>
                        <span class="word">
                        <select id="province" name="province">
                            <option value="-1" selected>省/直轄市</option>
                            <c:forEach items="${areaList }" var="area">
                                <option value="${area.areaId }">${area.areaName }</option>
                            </c:forEach>
                        </select>
                        <select id="mycity" name="city">
                            <option value="-1" selected>城市</option>
                        </select>
                        <select id="district" name="district">
                            <option value="-1" selected>縣/區</option>
                        </select></span>
                    </li>

jQuery+ajax

$("#province").change(function(){
        //獲得選中的省id
        var areaId = $(this).val();
        loadOption(areaId, "mycity");
    });
    
    $("#mycity").change(function(){
        //獲得選中的市id
        var areaId = $(this).val();
        loadOption(areaId, "district");
    });
function loadOption(areaId, selectId){
    $.ajax({
        url:path+"/user/login/getChildArea.do",
        type:"post",
        dataType:"text",
        async:false,
        data:{
            areaId:areaId
        },
        success:function(responseText){
            //alert(responseText);
            var jsonObj = $.parseJSON(responseText);//後臺查詢出來的地址jsonObj
            var aList = jsonObj.areaList;
            
            if(selectId == "mycity"){
                $("#mycity").empty();
                $("#district").empty();
                $("#mycity").append("<option value=‘-1‘>城市</option>");
                $("#district").append("<option value=‘-1‘>縣/區</option>");
            }else{
                $("#district").empty();
                $("#"+selectId).append("<option value=‘‘>縣/區</option>");
            }
            if(aList != null && aList.length > 0){
                var option = "";
                //數組不能用each不來遍歷
                for(var i = 0; i < aList.length; i++){
                    option = option + "<option value=‘"+aList[i].areaId+"‘>"+aList[i].areaName+"</option>";
                }
                $("#"+selectId).append(option);
                
            }
        }
    });
}

 

地區選擇三級聯動