首页 > 代码库 > 省市区镇（能够选四级）联动点击自己主动展开下一级
省市区镇（能够选四级）联动点击自己主动展开下一级
周末在家的时候，接到后端的一个电话。说领导有这个这种需求。刚開始我理解错了。
以为须要做一个省市区三级联动的，稀里哗啦的在网上找了数据。然后谢了出来。
结果沟通才知道。需求理解错了，须要电商站点填写个人收货地址的需求。简化用户点击次数，选择完省。市自己主动出来，选择市，县自己主动出来，接着再假设须要四级联动，就单独封装函数AJAX四级城镇请求出来：
代码为：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="renderer" content="webkit">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Document</title>
<style>
*{margin:0;padding:0}li{list-style-type:none}body{margin:0 auto;max-width:720px}.panle{position:fixed;top:0;height:100%;max-width:720px;width:100%;display:none}.panle1,.panle2,.panle3,.panle4{background:#fff;width:100%;margin:auto;text-align:center;height:100%;display:none}.panle p{text-align:center;position:relative;width:100%;height:36px;line-height:36px;border-bottom:1px solid #e4e4e4;font-size:18px}.panle p i{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAsCAYAAACQXhN9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwZJREFUeNq0l2tozWEcx5/ZGHOZy8xmwlw2bbO2xlzaUkopL5S8ISJ5oVByvzW3CCVRvPJC8kbklcYbKZrLRtjCzmK55R7D3Ibx/dXn1Glts//5P576dPZ/dv7nc/7P7/I8JyE3p9T9h9FPrBMLxZmk/yBIF+vFctFTzPYtGSEqxCKRKD6Jcz4luWK3mCMSxAdxUBzxJSkW+8QMrt8gPCa+hpXYNy4Xh0QRc0/FFnFK/LSJMJLuFlSeYBRzEbFGVIo/0TfGK0kWC8QOkcXcHbFCVLV9czySXmKZ2CzSmLtCyta1d0NQSX+xWqwSfcUvcZ7rxo5uCiLJFJvEUp7muzgptokXnd3YVUm22C7mc0+z5b/YK5r+dXNXJHl82CzRTbwXB8RhZC6sZBJVO4XrV2KnOC6+dXWdO5PMFPvF+Jgi2yBOi99BsqU9iTW2uWKXGMtcfUyRBR5tJT3EYjqpFVmruE0N3Ii3NcRKUsRKsZF6sLZwkblImAYXlQwUa/nAPqz5WZboWdgWncS3rqDIelNkJ8RW8dbHPpBEDJYgsJ3sKJ21yXkaJplHH/os9lDJzc7jsArO4G+r5Au+BVFJHZmUQbGN9C1JTBuUZe1hGglQIApFLS3Em+QRS1VKbLLpVQ/EE18Sq+q7wmQTqJkMnu65aIjdr+OVOD6knn3almuoGCCmiy/ivmgJK4kOW57rYowYTasp57UWYWiJjdccDNI5FaYQryE0y48+JI5qv8bZKg9REeeruqDtpiOJoyireS2kcY5jE2sI0jg7kzia5S12xWKSwU7uk5lr8CFxtP17BL6EWA0WZcQnwvkrlCQ6HhOnfJ4mlcxrJfVbfEiip5XLYrjIISHKWMbqjk4wQSWOHzeX6Ax5/GQrIfNq2kvxeCSOoqyiUxSw4eWDxe+lD4ljaW6Kd6R4Kl1iIofvRh8SR7At6A95onQO5lMpWOuHrWEljuyK0AksRsOIl4l+2P98SFzMMbYGSS57k/W8ZJ+SaHO9SnwKSYhM3xJHCleR2nZeqPwrwAAtdbC/p5izwAAAAABJRU5ErkJggg==) left center no-repeat;width:30px;height:36px;background-size:35%;display:inline-block;position:absolute;left:2em}.panle li{width:100%;display:inline-block;text-align:left;font-size:16px;line-height:24px;border-bottom:1px solid #e4e4e4;text-indent:2em;padding:3px 0}.r1{overflow-y:scroll}.selectf{display:inherit;height:40px;background:80px 10px/15%;border:currentColor;color:#999;padding:0 8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-right-color:#d0d0d0;border-right-width:1px;border-right-style:solid;-webkit-box-flex:1;box-flex:1;border-radius:0}.txt03 .selectf:last-child{border:none}.txt03{position:relative;background:#f8f8f8;border-radius:5px;border:1px solid #d0d0d0;border-image:none;width:96%;height:40px;overflow:hidden;margin-bottom:6px;margin-left:2%;clear:both;display:-webkit-box;display:box}
</style>
</head>
<body>
<div class="txt03">
<input name="" type="text" class="selectf" id="slect1" readonly value="http://www.mamicode.com/省">
<input name="" type="text" class="selectf" id="slect2" readonly value="http://www.mamicode.com/市">
<input name="" type="text" class="selectf" id="slect3" readonly value="http://www.mamicode.com/区或县">
<input name="" type="text" class="selectf" id="slect4" readonly value="http://www.mamicode.com/城镇">
</div>
<div class="panle">
<div class="panle1 r1">
<p class="back"><i></i>返回</p>
<ul></ul>
</div>
<div class="panle2 r1">
<p class="back"><i></i>返回</p>
<ul></ul>
</div>
<div class="panle3 r1">
<p class="back"><i></i>返回</p>
<ul></ul>
</div>
<div class="panle4 r1">
<p class="back"><i></i>返回</p>
<ul>fregtrtgtr</ul>
</div>
</div>
</body>
<script type="text/javascript" src="http://www.mamicode.com/addselect.js"></script>
<script>
(function($){
addst("panle","panle1","panle2","panle3","slect1","slect2","slect3","r1","back","selectf",1,cons);//參数设置1为真 代表有四联 假设仅仅须要三联 设置为0或者假，后面cons函数取消。
//页面头部有JQUERY 统一写法
function cons(){
var pan3=$(".panle3 ul li");
var storage=JSON.parse(localStorage.getItem("Userdata"));//获取所选择的省和市 JSON
$(".panle4 ul").empty();
pan3.each(function(index, el) {
$(el).on("click",function(){
var areaval=$(el).text();
var cityval=storage["city"];
var province=storage["prov"];
console.log("prov:"+province+"city:"+cityval+"area:"+areaval);
var oli=‘‘;
for (var i = 0; i < 10; i++) {
oli += ‘<li>11111</li>‘;
};
$(".panle3").hide();
$(".panle4 ul").html(oli);
$(".panle4,#slect4").show();
$(".panle4 ul li").each(function(index,el){
$(el).click(function(){
$("#slect1").val(province);
$("#slect2").val(cityval);
$("#slect3").val(areaval);
$("#slect4").val($(this).text());
$(".panle4,.panle").hide();
})
});
})
});
}
})(jQuery)
</script>
</html>
JS 代码 请大家移步下面地址:demo
省市区镇（能够选四级）联动点击自己主动展开下一级