/**
jQuery version: 1.8.3
Author: 小dee
Date: 2014.11.8
*/
接上一篇博客。
实现带缓存的仿亚马逊下拉面板
效果图：
图1 初始
![[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pBdVkyNWliRzluY3k1amIyMHZZbXh2Wnk4MU16UXpNRE12TWpBeE5ERXhMekE0TURBMU56UTVOemcwT0RjMU1TNXFjR2M9LmpwZw%3D%3D.jpg?w=700&webp=1 "[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板")
图2 点击省份
![[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pBdVkyNWliRzluY3k1amIyMHZZbXh2Wnk4MU16UXpNRE12TWpBeE5ERXhMekE0TURBMU9EUTJNVGMwT1RVeU5DNXFjR2M9LmpwZw%3D%3D.jpg?w=700&webp=1 "[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板")
图3 选择省份
![[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pBdVkyNWliRzluY3k1amIyMHZZbXh2Wnk4MU16UXpNRE12TWpBeE5ERXhMekE0TURFd01ESXlNek14TXpRNE1TNXFjR2M9LmpwZw%3D%3D.jpg?w=700&webp=1 "[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板")
图4 如果有第四级菜单
![[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pBdVkyNWliRzluY3k1amIyMHZZbXh2Wnk4MU16UXpNRE12TWpBeE5ERXhMekE0TURFd01UUTROakk0TVRFeE55NXFjR2M9LmpwZw%3D%3D.jpg?w=700&webp=1 "[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板")
说明：该功能模块是固定前三极菜单，第四级菜单如果存在则动态加载 ( 不足：没有做到所有菜单完全动态加载 )。
图5
![[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pBdVkyNWliRzluY3k1amIyMHZZbXh2Wnk4MU16UXpNRE12TWpBeE5ERXhMekE0TURFd056SXdOemcwTnpRME1DNXFjR2M9LmpwZw%3D%3D.jpg?w=700&webp=1 "[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板")
细节流程：
① 点击固定菜单时发生的动作：
■ 如果存在下拉面板，则下拉面板消失
■ 如果不存在下拉面板，则查看是否有缓存的下级菜单数据
■ 如果没有缓存数据,则通过 ajax 获取,同时缓存数据
■ 如果存在缓存数据，则直接读取缓存数据
■ 删除后级的菜单隐藏域信息、菜单数据以及菜单，同时后级菜单选择框的文字与样式还原成默认，删除动态加载的菜单选择框
② 点击固定菜单下单条数据时发生的动作：
■ 单条数据名称添加进相应选择框
■ 单条数据的 id 存入页面相应隐藏域
■ 对应的下拉面板消失
■ 请求下级菜单的数据
■ 把该数据追加至相应下拉面板中
■ 同时把该数据缓存在页面中
③ 点击最后一个固定菜单下单条数据时发生的动作：
■ 单条数据名称添加进城市选择框
■ 单条数据 id 存入页面隐藏域
■ 对应的下拉面板面板消失
■ 检测是否含有下级数据，如果有则追加动态菜单框
■ 请求动态菜单的数据
■ 把该数据追加至相应下拉面板中
■ 同时把该数据缓存在页面中
④ 点击动态加载的菜单下单条数据时发生的动作：
■ 单条数据名称添加进相应选择框
■ 单条数据的 id 存入页面相应隐藏域
■ 对应的下拉面板消失
addr.html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿亚马逊 - 动态添加的多级联动菜单</title>
<style>
body,html{ font-size:14px;}
form{ margin-top:20px; margin-left:20px;} /* 选择框 */
.con{ float:left; margin-right:10px; position:relative;}
.sel{ padding:4px 23px 3px 5px;
border:1px solid #ccc;
background:url("images/dropdown_bg.gif") right 2px no-repeat;
}
.sel:hover{ text-decoration:underline;
cursor:pointer;
} /* 下拉面板 */
.dropdiv{ width:500px;
margin: 0;
border: solid 1px #cbe3f7;
padding: 7px 0 15px 15px;
background-color: #fff;
position:absolute; font-size:12px;
}
/* 省市信息 */
.span-new{ display:inline-block;
width:110px;
padding-right:15px;
line-height:24px; color:rgb(0, 75, 145);
cursor:pointer;
} .span-new:hover{ text-decoration:underline; color:orange;} /*结果*/
#result{ margin:20px;} .cls{ clear:both;}
</style>
<script src="../js/jquery-1.8.3.min.js"></script>
</head>
<body> <form id="sel-form" action="addr.php" method="post"> <div id="pcon" class="con">
<div id="province" class="sel">请选择省</div>
</div> <div id="ccon" class="con">
<div id="city" class="sel">请选择城市</div>
</div> <div id="acon" class="con">
<div id="area" class="sel">请选择区县</div>
</div> <div class="cls"></div>
<br>
<input type="submit" id="sub" value="提交"> <!-- 隐藏域 -->
<input type="hidden" id="pid" name="pid">
<input type="hidden" id="p" name="p">
<input type="hidden" id="cid" name="cid">
<input type="hidden" id="c" name="c">
<input type="hidden" id="aid" name="aid">
<input type="hidden" id="a" name="a">
<input type="hidden" id="sid" name="sid">
<input type="hidden" id="s" name="s"> </form> <!--缓存数据-->
<input type="hidden" id="pdata" name="pdata"> <!-- 显示选择的结果 -->
<div id="result">
省份：<{$pid}> - <{$p}><br>
城市：<{$cid}> - <{$c}><br>
区县：<{$aid}> - <{$a}><br>
<{if $sid && $s }>
街道：<{$sid}> - <{$s}>
<{/if}>
</div> <script> $(function(){ //初始状态下只有第一级菜单显示可用(黑色字体)，后级菜单显示不可用(灰色字体)
$(".sel:gt(0)").css("color","#ccc"); //定义下拉面板
$dropdiv = $("<div class='dropdiv'></div"); /*******************
* 点击第一级菜单 *
********************/
$("#province").click(function(){ //可以封装函数
//删除后级 - 菜单单条信息
$("#citytab .span-new").remove();
$("#areatab .span-new").remove();
$("#streettab .span-new").remove();
$("#citytab").remove();
$("#areatab").remove();
$("#streettab").remove();
//删除后级 - 菜单信息
$("#city").text("请选择城市");
$("#area").text("请选择区县");
//清空后级对应的隐藏域
$("#cid").val("");
$("#c").val("");
$("#aid").val("");
$("#a").val("");
$("#sid").val("");
$("#s").val("");
//后级文字颜色
$("#city").css("color","#ccc");
$("#area").css("color","#ccc"); if( $("#provincetab").length == 0 ){ //如果有省份缓存数据
if($("#pdata").val() == ""){ //使用ajax获取省份信息
$.post("../sel2.php",{
city:true
},function(data,textStatus){ //接收json数据
var dataObj = eval("("+data+")"); //转换为json对象 //缓存数据
$("#pdata").val(data); $.each(dataObj,function(idx,item){ //给下拉面板加上ID
$dropdiv.attr("id","provincetab").css({"top":"25px","left":"0px"});
$dropdiv.insertAfter($(".sel:eq(0)")); //把获取到的数据追加至面板中
if( $("#provincetab .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.provinceID+"\">"+item.province+"</span>");
$span_new.appendTo($("#provincetab"));
}
}) });
}
else{ //取出缓存数据
var $bufferData = $("#pdata").val();
var dataObj = eval("("+$bufferData+")"); $.each(dataObj,function(idx,item){ //给下拉面板加上ID
$dropdiv.attr("id","provincetab").css({"top":"25px","left":"0px"});
$dropdiv.insertAfter($(".sel:eq(0)")); //把获取到的数据追加至面板中
if( $("#provincetab .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.provinceID+"\">"+item.province+"</span>");
$span_new.appendTo($("#provincetab"));
}
})
} }else{ //当下拉面板已经存在时点击一级菜单，删除下拉面板
$("#provincetab").remove();
} //$("#province").click(function(){})结束
}); /*******************
* 点击单条省份时 *
********************/
$("#provincetab .span-new").live("click",function(){ //省份选择框
$("#province").text($(this).text()); //隐藏域信息
$("#pid").val($(this).attr("id"));
$("#p").val($(this).text()); $pid = $("#pid").val(); //给$pid加上城市标识c，防止jQuery错误识别id
$pid4id = "c"+$pid; //同时创建以该省id为id的input隐藏域id=c+pid，用作缓存城市数据
if($('#'+$pid4id).length == 0){ $bufferCtiy = $("<input type='hidden' id='"+$pid4id+"'>");
$bufferCtiy.insertAfter($("#pdata")); } //删除省菜单信息
$("#provincetab .span-new").remove(); //后级 - 城市菜单弹出
//检查是否有缓存数据
if($("#"+$pid4id+"").val() == ""){ $id = $(this).attr("id");
$id4id = "c"+$id //使用ajax获取省份信息
if( $("#citytab").length == 0 ){ $.post("../sel2.php",{
pid : $("#pid").val()
},function(data,textStatus){ //接收json数据
var dataObj = eval("("+data+")"); //转换为json对象 //同时缓存对应省份的城市数据
$("#"+$id4id).val(data); $.each(dataObj,function(idx,item){ //给下拉面板加上ID
$dropdiv.attr("id","citytab").css({"top":"24px","left":"0px"});
$("#citytab").appendTo($("#ccon")); //后级菜单文字颜色
$("#city").css("color","#000"); //把获取到的数据追加至面板中
if( $("#city .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.cityID+"\">"+item.city+"</span>");
$span_new.appendTo($("#citytab"));
}
});
});
}
}else{ //取出缓存数据
var $bufferData = $('#'+$pid4id).val();
var dataObj = eval("("+$bufferData+")"); //给下拉面板加上ID
$dropdiv.attr("id","citytab").css({"top":"24px","left":"0px"});
$("#citytab").appendTo($("#ccon")); //后级菜单文字颜色
$("#city").css("color","#000"); $.each(dataObj,function(idx,item){ //把获取到的数据追加至面板中
if( $("#city .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.cityID+"\">"+item.city+"</span>");
$span_new.appendTo($("#citytab"));
}
});
} //$("#provincetab .span-new").live("click",function(){})结束
}); /*******************
* 点击单条城市时 *
********************/
/******************************************
* 7个动作: *
* *
* 1.城市名称添加进城市选择框 *
* 2.城市id存入页面隐藏域 *
* 3.城市面板消失 *
* 4.在dom中插入城市后级 - 区域下拉面板 *
* 5.请求城市后级 - 区县的数据 *
* 6.把该数据追加至区县面板中 *
* 7.同时把该数据缓存在页面中 *
* *
*******************************************/
$("#citytab .span-new").live("click",function(){ //1.城市名称添加进城市选择框
$("#city").text($(this).text()); //2.城市id存入页面隐藏域
$("#cid").val($(this).attr("id"));
$("#c").val($(this).text()); $cid = $("#cid").val(); //3.城市面板消失
$("#citytab .span-new").remove();
$("#citytab").remove(); //4.在dom中插入城市后级 - 区域下拉面板
//给$cid加上城市标识c，防止jQuery错误识别id
$cid4id = "c"+$cid; //同时创建以该城市id为id的input隐藏域id=c+cid，用作缓存区县数据
//创建隐藏域
if($('#'+$cid4id).length == 0){ $bufferArea = $("<input type='hidden' id='"+$cid4id+"'>");
$bufferArea.insertAfter($("#pdata"));
} //检查是否有缓存数据
if($("#"+$cid4id+"").val() == ""){ $id = $(this).attr("id");
$id4id = "a"+$id; //使用ajax获取省份信息
if( $("#areatab").length == 0 ){ $.post("../sel2.php",{
cid : $("#cid").val()
},function(data,textStatus){ //接收json数据
var dataObj = eval("("+data+")"); //转换为json对象 //同时缓存对应城市的城市数据
$("#"+$cid4id).val(data); $.each(dataObj,function(idx,item){ //给下拉面板加上ID
$dropdiv.attr("id","areatab").css({"top":"24px","left":"0px"});
$dropdiv.appendTo($("#acon")); //后级菜单文字颜色
$("#area").css("color","#000"); //把获取到的数据追加至面板中
if( $("#area .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.areaID+"\">"+item.area+"</span>");
$span_new.appendTo($("#areatab"));
}
});
});
}
}else{ //取出缓存数据
var $bufferData = $('#'+$cid4id).val();
var dataObj = eval("("+$bufferData+")"); //给下拉面板加上ID
$dropdiv.attr("id","areatab").css({"top":"24px","left":"0px"});
$dropdiv.appendTo($("#acon")); $.each(dataObj,function(idx,item){ //把获取到的数据追加至面板中
if( $("#area .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.areaID+"\">"+item.area+"</span>");
$span_new.appendTo($("#areatab"));
}
});
} }); /**************************
* 点击二级菜单 - 城市时 *
***************************/
$("#city").click(function(){ if($("#pid").val() != ""){ //删除后级 - 菜单信息
$("#areatab .span-new").remove();
$("#streettab .span-new").remove();
$("#streettab").remove();
$("#aid").val("");
$("#a").val("");
$("#sid").val("");
$("#s").val("");
$("#street").remove();
//后级菜单文字颜色
$("#area").css("color","#ccc");
$("#area").text("请选择区县"); //当下拉面板不存在时
if( $("#citytab").length == 0 ){ //根据表单中的省份id的隐藏域和表单外省份id=c+id的隐藏域的id进行对比，从页面缓存中读取数据
$pid = $("#pid").val(); //存在缓存，直接从页面的隐藏域读取数据
//取出缓存数据
var $bufferData = $('#c'+$pid).val(); var dataObj = eval("("+$bufferData+")"); //给下拉面板加上ID
$dropdiv.attr("id","citytab").css({"top":"24px","left":"0px"});
//注意：此处不能使用$("#citytab")
$dropdiv.appendTo($("#ccon")); $.each(dataObj,function(idx,item){ //把获取到的数据追加至面板中
if( $("#city .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.cityID+"\">"+item.city+"</span>");
$span_new.appendTo($("#citytab"));
}
}); }else{ $("#citytab .span-new").remove();
$("#citytab").remove();
}
}
}); /*******************
* 点击单条区域时 *
********************/
/******************************************
* 7个动作: *
* *
* 1.区域名称添加进城市选择框 *
* 2.区域id存入页面隐藏域 *
* 3.区域面板消失 *
* 4.检测是否含有下级数据,如果有则追加 *
* 5.请求区县后级 - 街道的数据 *
* 6.把该数据追加至区县街道面板中 *
* 7.同时把该数据缓存在页面中 *
* *
*******************************************/
$("#areatab .span-new").live("click",function(){ //1.区域名称添加进城市选择框
$("#area").text($(this).text());
$("#area").css("color","#000"); //2.区域id存入页面隐藏域
$("#aid").val($(this).attr("id"));
$("#a").val($(this).text()); $sid4id = "s"+$("#aid").val();
//创建隐藏域
if($('#'+$sid4id).length == 0){ $bufferArea = $("<input type='hidden' id='"+$sid4id+"'>");
$bufferArea.insertAfter($("#pdata"));
} //3.区域面板消失
$(this).siblings().remove();
$(this).parent().remove();
$(this).remove(); //先检查是否有缓存
if($("#"+$sid4id).val() == ""){ //4.如果没有缓存的话再检测是否含有下级数据,如果有则追加
$.post("../sel2.php",{
aid : $("#aid").val()
},function(data,textStatus){ //如果有返回值
if(data){ //动态添加下一级菜单
$street = $("<div id=\"scon\" class=\"con\"><div id=\"street\" class=\"sel\">选择街道</div></div>");
$street.insertAfter($("#acon")); //接收json数据
var dataObj = eval("("+data+")"); //转换为json对象 //同时缓存对应城市的街道数据
$("#"+$sid4id).val(data); $.each(dataObj,function(idx,item){ //给下拉面板加上ID
$dropdiv.attr("id","streettab").css({"top":"24px","left":"0px"});
$dropdiv.appendTo($("#scon")); //把获取到的数据追加至面板中
if( $("#street .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.streetID+"\">"+item.street+"</span>");
$span_new.appendTo($("#streettab"));
}
});
}
}); }else{ //存在缓存，直接从页面的隐藏域读取数据
//取出缓存数据
var $bufferData = $("#"+$sid4id).val(); var dataObj = eval("("+$bufferData+")"); //动态添加下一级菜单
$street = $("<div id=\"scon\" class=\"con\"><div id=\"street\" class=\"sel\">选择街道</div></div>");
$street.insertAfter($("#acon")); //给下拉面板加上ID
$dropdiv.attr("id","streettab").css({"top":"24px","left":"0px"});
$dropdiv.appendTo($("#scon")); $.each(dataObj,function(idx,item){ //把获取到的数据追加至面板中
if( $("#street .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.streetID+"\">"+item.street+"</span>");
$span_new.appendTo($("#streettab"));
}
}); } }); /**************************
* 点击三级菜单 - 区域时 *
***************************/
/******************************************************
* 4个动作: *
* *
* 1.如果存在下拉面板，则下拉面板消失 *
* 2.如果不存在下拉面板，则查看是否有缓存数据 *
* 3.如果没有缓存数据,则通过ajax获取,同时缓存数据 *
* 4.如果存在缓存数据，则直接读取 *
* *
*******************************************************/
$("#area").click(function(){ if($("#cid").val() != ""){ //删除后级 - 菜单信息
$("#streettab .span-new").remove();
$("#streettab").remove();
$("#sid").val("");
$("#s").val("");
$("#street").remove(); //当下拉面板不存在时
if( $("#areatab").length == 0 ){ //根据表单中的城市id的隐藏域和表单外省份id=a+id的隐藏域的id进行对比，从页面缓存中读取数据
$cid = $("#cid").val(); //存在缓存，直接从页面的隐藏域读取数据
//取出缓存数据
var $bufferData = $('#c'+$cid).val(); var dataObj = eval("("+$bufferData+")"); //给下拉面板加上ID
$dropdiv.attr("id","areatab").css({"top":"24px","left":"0px"});
//注意：此处不能使用$("#citytab")
$dropdiv.appendTo($("#acon")); $.each(dataObj,function(idx,item){ //把获取到的数据追加至面板中
if( $("#area .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.areaID+"\">"+item.area+"</span>");
$span_new.appendTo($("#areatab"));
}
}); }else{ $("#areatab .span-new").remove();
$("#areatab").remove();
}
}
}); /*******************
* 点击单条街道时 *
********************/
/******************************************
* 3个动作: *
* *
* 1.街道名称添加进街道选择框 *
* 2.街道id存入页面隐藏域 *
* 3.街道面板消失 *
* *
*******************************************/
$("#streettab .span-new").live("click",function(){ //1.区域名称添加进城市选择框
$("#street").text($(this).text());
$("#street").css("color","#000"); //2.区域id存入页面隐藏域
$("#sid").val($(this).attr("id"));
$("#s").val($(this).text()); //3.区域面板消失
$(this).siblings().remove();
$(this).parent().remove();
$(this).remove();
}); /*******************
* 点击街道菜单框时 *
********************/
$("#street").live("click",function(){ if($("#aid").val() != ""){ //当下拉面板不存在时
if( $("#streettab").length == 0 ){ //根据表单中的区域id的隐藏域和表单外区域id=a+id的隐藏域的id进行对比，从页面缓存中读取数据
$aid = $("#aid").val(); //存在缓存，直接从页面的隐藏域读取数据
//取出缓存数据
var $bufferData = $('#s'+$aid).val(); var dataObj = eval("("+$bufferData+")"); //给下拉面板加上ID
$dropdiv.attr("id","streettab").css({"top":"24px","left":"0px"});
//注意：此处不能使用$("#citytab")
$dropdiv.appendTo($("#scon")); $.each(dataObj,function(idx,item){ //把获取到的数据追加至面板中
if( $("#street .span-new").length < dataObj.length ){ $span_new = $("<span class=\"span-new\" id=\""+item.streetID+"\">"+item.street+"</span>");
$span_new.appendTo($("#streettab"));
}
}); }else{ $("#streettab .span-new").remove();
$("#streettab").remove();
}
}
}); //如果有一栏为空或者不可用，不允许提交
$("#sub").click(function(){ if($("#street").length == 0){ if($("#pid").val() == "" || $("#p").val() == "" || $("#cid").val() == "" || $("#c").val() == "" || $("#aid").val() == "" || $("#a").val() == "" || $("#city").attr("disabled") === true || $("#area").attr("disabled") === true){ alert("请完成选择");
return false;
}
}else{ if($("#pid").val() == "" || $("#p").val() == "" || $("#cid").val() == "" || $("#c").val() == "" || $("#aid").val() == "" || $("#a").val() == "" || $("#city").attr("disabled") === true || $("#area").attr("disabled") === true || $("#s").length == 0 || $("#s").val() == "" || $("#sid").length == 0 || $("#sid").val() == ""){ alert("请完成选择");
return false;
}
}
}); //$(function(){})结束
}); </script>
</body>
</html>
代码下载地址：https://github.com/dee0912/select_addr/tree/master/demo2
欢迎朋友们交流讨论。
作者：小dee
说明：作者写博目的是记录开发过程，积累经验，便于以后工作参考。
如需转载，请在文章页面保留此说明并且给出原文链接。谢谢！
如需转载，请在文章页面保留此说明并且给出原文链接。谢谢！