省市区镇（可以选四级）联动点击自动展开下一级

本文主要是介绍省市区镇（可以选四级）联动点击自动展开下一级，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

周末在家的时候，接到后端的一个电话，说领导有这个这样的需求。刚开始我理解错了。以为需要做一个省市区三级联动的，稀里哗啦的在网上找了数据。然后谢了出来。结果沟通才知道。需求理解错了，需要电商网站填写个人收货地址的需求。简化用户点击次数，选择完省，市自动出来，选择市，县自动出来，接着再如果需要四级联动，就单独封装函数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="省"><input name="" type="text" class="selectf"  id="slect2" readonly value="市"><input name="" type="text" class="selectf"  id="slect3" readonly value="区或县"><input name="" type="text" class="selectf"  id="slect4" readonly value="城镇"></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="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>