地区选择三级联动

Posted 2020-11-20 ljllove

用户表

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);
                
            }
        }
    });
}