定制三级联动（类似于去哪儿旅行网站效果）

风泽木

已于 2023-04-20 08:48:41 修改

阅读量413

点赞数 2

分类专栏：知识点整理文章标签： js jquery css

于 2020-08-13 18:01:54 首次发布

本文链接：https://blog.csdn.net/qq_41317414/article/details/107986087

版权

知识点整理专栏收录该内容

10 篇文章 0 订阅

订阅专栏

修改input框默认样式定制好看的三级联动效果，做一个类似于去哪儿旅行选择地址的三级联动效果（白嫖）

项目中用到的技术

使用一些css样式使布局更加优美
使用JS或函数对数据进行递归处理，从而把后台数据转换成符合自己业务逻辑的数据
使用JQ控制页面元素，使操作更加简单快捷

效果截图：
在这里插入图片描述

主要难点：
问：后端一次性把全国省市区的数据返给前端，如何处理成符合前端业务逻辑的数据？？？
答：采用递归的方式把数据一级级取出来，例：我选择安徽省–>拿到安徽省的唯一ID,把ID传给封装函数–>封装通过循环遍历，得到该省级下所有市级的数组，将其存放至全局变量中，区级原理相同
问：函数封装是为何用_this 、_menu ,有什么用途吗??
答：在函数封装时为避免全局污染在函数内部使用_this;通俗点解释就是，我局部想使用一块砖头(this)，但是我又害怕我局部调用时直接划伤了这块砖头(this)，所以我先复制一块砖头（_this），在使用这个砖头的时候，不论是用刀砍还是用电钻钻它，都不影响原来的那块砖头（this）–全局污染说白了就是这回事。

sort: function (obj, Id,Ids) {//obj 后台返回的原数组  Id拿到的省级id  Ids拿到的市级id 
            var _this = this;
            var _menu = obj;
            var len = _menu.length;
            for(var i = 0; i < len; i++){
                var item = _menu[i] ;
                if(item.list && item.list.length != 0){
                    var child = item.list;
                    if(child.length==0){tempmodel.cityData=[{name:"暂无数据"}]}
                    for(var j = 0; j < child.length; j++){
                        if(child[j].id==Id){
                            tempmodel.cityData=[];//数据赋空
                            tempmodel.cityData=child[j].city;
                            if(child[j].city.id==Ids){
                                tempmodel.addData=[];//数据赋空
                                tempmodel.addData=child[j].city[0].list;
                            }
                        }
                    }
                }
            }
        },

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body  ms-controller="demoIdex">
<div class="main_box">
    <input class="dz_input" id="dzInput" ms-duplex="AddrName"  readonly="readonly"/>
    <div class="search_form_suggest" style="display: none;">
        <div class="navtitle" >
            <ul id="region">
                <li id="province" class="addr cur"><a href="javascript:;">省</a></li>
                <li id="city" class="addr"><a href="javascript:;">市</a></li>
                <li id="district" class="addr"><a href="javascript:;">区</a></li>
            </ul>
            <a class="ico btn_close thRight" id="close">X</a>
        </div>
        <div class="thLeft thPadT5 tab_select province">
            <dl class="clrfix" ms-repeat-el="ctData">
                <dt>{{el.SX}}</dt>
                <dd class="clr_after">
                    <ul>
                        <li ms-repeat-item="el.list" class="">
                            <a ms-click="goType(item)">{{item.name}}</a>
                        </li>
                    </ul>
                </dd>
            </dl>

        </div>
        <div class="thLeft thPadT5 tab_select city">
            <dl class="clrfix" ms-repeat-el="cityData">
                <dt>{{el.SX}}</dt>
                <dd class="clr_after">
                    <ul>
                        <li>
                            <a ms-click="goTypeCity(el)">{{el.name}}</a>
                        </li>
                        <li>
                            <a ms-click="goTypeCityNo()">暂不选择</a>
                        </li>
                    </ul>
                </dd>
            </dl>

        </div>
        <div class="thLeft thPadT5 tab_select district">
            <dl class="clrfix">
                <dt>A-Z</dt>
                <dd class="clr_after">
                    <ul>
                        <li ms-repeat-el="addData">
                            <a ms-click="goTypeDis(el,$index)">{{el.name}}</a>
                        </li>
                        <li>
                            <a ms-click="goTypeDistNo()">暂不选择</a>
                        </li>
                    </ul>
                </dd>
            </dl>

        </div>
    </div>
</div>

</body>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/avalon1.47.js"></script>
<script>
    var tempmodel = avalon.define({
        $id: "demoIdex",
        AddrName:"",
        id:"",
        ctData: [
            {
                id: 1000,
                SX: "A-G",
                list: [{
                    id: 1001,
                    name: "安徽省",
                    city:[{
                        id:10011,name:"市辖区",SX:"A-Z",list:[{id:1001101,name:"安平区"},{id:1001102,name:"昌化区"}]
                    }]
                },
                    {
                        id: 1002,
                        name: "北京",
                        city: [{
                            id: 10021,
                            name: "市辖区",
                            SX: "A-Z",
                            list: [{id:1002101,name:"东城区"},{id:1002102,name:"朝阳区"}]
                        }]
                    },
                    {
                        id: 1003,
                        name: "重庆"
                    },
                    {
                        id: 1004,
                        name: "福建省"
                    },
                    {
                        id: 1005,
                        name: "甘肃省"
                    },
                    {
                        id: 1006,
                        name: "广东省"
                    },
                    {
                        id: 1007,
                        name: "广西壮族自治区"
                    },
                    {
                        id: 1008,
                        name: "贵州省"
                    }
                ]
            },
            {
                id: 2000,
                SX: "H-L",
                list: [{
                    id: 2001,
                    name: "海南省"
                }, {
                    id: 2002,
                    name: "河北省"
                }, {id: 2003, name: "河南省"}, {id: 2004, name: "湖北省"}
                ]
            },
            {
                id: 3000,
                SX: "M-T",
                list: [{id: 3001,name: "山东省"}, {id: 3002, name: "山西省"}, {id: 3003, name: "上海"}, {id: 3004, name: "天津"}]
            },
            {
                id: 4000,
                SX: "W-Z",
                list: [{
                    id: 4001, name: "西藏自治区"}, {id: 4002, name: "新疆维吾尔自治区"}, {id: 4003, name: "云南省"}, {id: 4004, name: "浙江省"}]
            }
        ],
        cityData:[],
        addData:[],
        InitWigetData:function(){
            tempmodel.getList()
        },
        getList:function(){
            $("#dzInput").click(function(){
                $(".search_form_suggest").show();
            });
            $("#close").click(function(){
                $(".search_form_suggest").hide();

            });
            $(document).click(function(){
                $(".search_form_suggest").hide();
            });
            $("#dzInput,.search_form_suggest").click(function(event){//阻止冒泡事件
                event.stopPropagation();
            });
        },
        goTypeCityNo:function(){
            $(".search_form_suggest").hide();
        },
        goTypeDistNo:function(){
            $(".search_form_suggest").hide();
        },
        goType:function(el){
            var Id=el.id;tempmodel.id=el.id;
            var str=el.name+',';
            tempmodel.AddrName=str;
            $("#region li").removeClass("cur");
            $("#city").addClass("cur")
            $(".province").hide();$(".city").show();
            tempmodel.sort(tempmodel.ctData,Id);

        },
        sort: function (obj, Id,Ids) {
            var _this = this;
            var _menu = obj;
            var len = _menu.length;
            for(var i = 0; i < len; i++){
                var item = _menu[i] ;
                if(item.list && item.list.length != 0){
                    var child = item.list;
                    if(child.length==0){tempmodel.cityData=[{name:"暂无数据"}]}
                    for(var j = 0; j < child.length; j++){
                        if(child[j].id==Id){
                            tempmodel.cityData=[];
                            tempmodel.cityData=child[j].city;
                            if(child[j].city.id==Ids){
                                tempmodel.addData=[];
                                tempmodel.addData=child[j].city[0].list;
                            }
                        }
                    }
                }
            }
        },
        goTypeCity:function(el){
           var name=el.name;var Ids=el.id;
            tempmodel.AddrName=tempmodel.AddrName+name+",";
            $("#region li").removeClass("cur");
            $("#district").addClass("cur")
            $(".district").show();$(".city").hide();
            tempmodel.sort(tempmodel.ctData,tempmodel.id,Ids);
        },
        goTypeDis:function(el,index){
            var name=el.name;
            tempmodel.AddrName=tempmodel.AddrName+name;
            $(".search_form_suggest").hide();
            $("#region li").removeClass("cur");
            $("#province").addClass("cur");
            $(".province").show();$(".district").hide()
        }
    });

    tempmodel.InitWigetData();
</script>
</html>

css样式文件

* {margin:0;padding:0;}
html,body {background:#fff;font-family:Arial,sans-serif,SimSun;font-size:12px;}
.dz_input {height:28px;line-height:28px;width:420px;display:block;border:1px solid #dbdbdb;}
.search_form_suggest {border:1px solid #ccc;position:absolute;top:49px;left:20px;z-index:978;width:420px;/*padding:5px 0;*/    background:#fff;overflow:hidden;}
.main_box {padding:20px;position:relative;width:420px;}
.navtitle {width:100%;height:100%;}
.navtitle ul {width:100%;border-bottom:1px solid #e6e6e6;box-sizing:border-box;}
.navtitle ul li {float:left;}
.navtitle ul li.addr {padding:5px 0;border-left:1px solid #eee;border-right:1px solid #eee;background:#eee;}
.navtitle ul {padding-left:72px;}
.navtitle ul li.cur {background:#fff;}
.navtitle li.addr a {padding:6px 38px;color:#666;}
.navtitle li.cur a {color:#12b8f6;font-weight:700;}
.thLeft {float:left;padding:5px 10px;}
.tab_select dl {padding:5px 0}
.tab_select dt {width:46px;background:#12b8f6;font:bold 12px/22px Tahoma,Geneva,sans-serif;color:#fff;text-align:center;margin-left:5px}
.tab_select dd {line-height:22px;width:317px;}
.search_form_suggest ul li {padding-bottom:5px;}
.search_form_suggest ul li.attr {border-bottom:1px solid #12b8f6;}
.search_form_suggest ul li.search_sort a {padding:10px;color:#666}
.search_form_suggest ul li a:hover {color:#12b8f6}
.search_form_suggest ul li.attr a {font-weight:700;color:#0084bb}
.tab_select dd a {color:#888;margin-left:10px;display:inline-block}
ul li {list-style:none;}
.search_form_suggest ul li {float:left;}
.thRight {float:right}
.btn_close {cursor:pointer;width:16px;height:16px;line-height:16px;text-align:center;color:#333;position:absolute;right:5px;top:6px;font-weight:600;}
.search_form_suggest ul,.search_form_suggest li,.search_form_suggest dl,.search_form_suggest dt,.search_form_suggest dd {list-style:none;float:left;}
a {text-decoration:none;outline:none;cursor:pointer}
.city,.district {display:none;}

写在最后：

干货博主-欢迎您的点赞和收藏，请支持原创
如果您觉得文章有需要改进的地方，欢迎指正！

风泽木

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定制三级联动（类似于去哪儿旅行网站效果）

修改input框默认属性定制好看的三级联动效果，做一个类似于去哪儿旅行选择地址的三级联动效果（白嫖）使用一些css样式使布局更加优美使用JS或函数进行递归处理，从而把后台数据转换成自己想要的数据效果截图：主要难点：这个三级联动主要难点是在于每次后端返回数据转换成自己想要的格式sort: function (obj, Id,Ids) {console.log(obj)var _this = this;var _menu = _this.ctData;var menuId = [];
复制链接

扫一扫

专栏目录