码迷,mamicode.com
首页 > 其他好文 > 详细

地区选择三级联动

时间:2018-06-23 19:08:52      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:ems   word   default   ESS   获得   item   lis   each   com   

用户表

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

 

 

 

地区选择三级联动

标签:ems   word   default   ESS   获得   item   lis   each   com   

原文地址:https://www.cnblogs.com/ljllove/p/9217562.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!