关闭

[置顶] 省市区镇(可以选四级)联动点击自动展开下一级

5659人阅读 评论(5) 收藏 举报
分类:

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

JS 代码 请大家移步以下地址:demo

2
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:88985次
    • 积分:1470
    • 等级:
    • 排名:千里之外
    • 原创:62篇
    • 转载:1篇
    • 译文:0篇
    • 评论:19条
    文章分类
    最新评论