自动三级联动-复杂

最新推荐文章于 2024-10-17 12:33:27 发布
Study 365 Always
最新推荐文章于 2024-10-17 12:33:27 发布
阅读量133
点赞数
本文链接：https://blog.csdn.net/L8676/article/details/100118449
版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            width: 500px;
            height: 360px;
            border: 1px solid black;
            margin: auto;
        }

        .toptitle {
            border-bottom: 1px solid black;
            padding: 1rem 2rem;
        }

        .toptitle input {
            border: 1px solid black;
            outline: none;
            height: 1.5rem;
            padding: 0 1rem;
            width: 15rem;
            box-sizing: border-box;
        }

        .toptitle button {
            border: 1px solid black;
            border-radius: 5px;
            padding: 0 1rem;
            outline: none;
        }

        .toptitle > div {
            position: relative;
        }

        #menu {
            position: absolute;
            display: none;
            list-style: none;
            width: 15rem;
            border: 1px solid silver;
            box-sizing: border-box;
            background: #fff;
        }

        #menu > li {
            font-size: 0.9rem;
            padding: 0.3rem 1rem;
        }

        .citylits {
            padding: 1rem;
        }

        .usersele {
            border-bottom: 1px solid black;
            height: 2rem;
            /*overflow-y: hidden;
            overflow-x: scroll;*/
        }

        .city {
            height: 15rem;
            border: 1px solid black;
        }

        .spanlist {
            display: inline-block;
            padding: 0.3rem 1rem;
            background: #e3e3e3;
            font-size: 0.8rem;
            margin: 1rem 0.5rem;
            border-radius: 6px;
        }

        .userspan {
            display: inline-block;
            padding: 0.3rem 0.3rem;
            background: #e3e3e3;
            font-size: 0.7rem;
            border-radius: 6px;
            margin: 0 0.3rem;
        }

        .userspan > span {
            display: inline-block;
            color: #000;
            margin-left: 0.5rem;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="toptitle">
        <div>
            <input id="ipt" type="text"/>
            <button id="btnsearch">搜索</button>
            <ul id="menu">
            </ul>
        </div>
    </div>
    <div class="citylits">
        <div class="usersele">

        </div>
        <div class="city">

        </div>
    </div>
</div>
<script>
    var city = [
        {
            "id": 10001,
            "name": "陕西省",
            "child": [
                {
                    "id": 100011,
                    "name": "西安市",
                    "child": [
                        {
                            "id": 100011,
                            "name": "高新区",
                            "child": [
                                {
                                    "name": "高新街道1",
                                    "child": [
                                        {
                                            "name": "高新街道1，38号"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "id": 100011,
                            "name": "未央区"
                        }
                    ]
                },
                {
                    "id": 100012,
                    "name": "宝鸡市",
                    "child": [
                        {
                            "id": 100011,
                            "name": "高新区"
                        },
                        {
                            "id": 100011,
                            "name": "成仓区"
                        }
                    ]
                }
            ]
        },
        {
            "id": 10002,
            "name": "甘肃省",
            "child": [
                {
                    "id": 100021,
                    "name": "兰州市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "兰州区1"
                        },
                        {
                            "id": 100021,
                            "name": "兰州区2"
                        }
                    ]
                },
                {
                    "id": 100022,
                    "name": "酒泉市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "酒泉区1"
                        },
                        {
                            "id": 100021,
                            "name": "酒泉区2"
                        }
                    ]
                }
            ]
        }
    ]
    var ipt = document.getElementById("ipt");
    var menu = document.getElementById("menu");
    var btnsearch = document.getElementById("btnsearch");
    var cityitem = document.getElementsByClassName("city")[0];
    var usersele = document.getElementsByClassName("usersele")[0];
    var user = [];
    ipt.onkeyup = function () {
        menu.style.display = "block";
        menu.innerHTML = "";
        for (var i = 0; i < city.length; i++) {
            if (city[i].name.indexOf(this.value) != -1) {
                var list = document.createElement("li");
                list.innerHTML = city[i].name;
                list.className = "listli";
                list.setAttribute("data-index", i);
                list.addEventListener("click", lidata)
                menu.appendChild(list);
            }
        }
    }
    function lidata() {
        ipt.value = this.innerHTML;
        ipt.setAttribute("data-index", this.getAttribute("data-index"));
        menu.style.display = "none";
    }

    //点击搜索
    btnsearch.onclick = function () {
        var index = ipt.getAttribute("data-index");
        cityitem.innerHTML = "";
        //遍历创建span
        user.push(city[index].child);
        pushcreateelement();
    }
    function pushcreateelement() {
        for (var i = 0; i < user[user.length - 1].length; i++) {
            var span = document.createElement("span");
            span.innerHTML = user[user.length - 1][i].name;
            span.className = "spanlist";
            //给当前点击的市绑定索引
            span.index = i;
            span.addEventListener("click", clickspan);
            cityitem.appendChild(span);
        }
    }
    //span  点击市的点击事件
    function clickspan() {
        cityitem.innerHTML = "";
        var span = document.createElement("span");
        span.innerHTML = this.innerHTML;
        span.className = "userspan";
        var spanclose = document.createElement("span");
        spanclose.innerHTML = "x";
        spanclose.className = "close";
        //添加点击事件
        spanclose.index = user.length - 1;
        spanclose.addEventListener("click", close);
        span.appendChild(spanclose);
        usersele.appendChild(span);

        if (user[user.length - 1][this.index].child == undefined) {
            return;
        }
        user.push(user[user.length - 1][this.index].child);
        pushcreateelement();
    }
    //close的点击事件
    function close() {
        //包括自身往后所有的元素全部移除
        var userspan = document.getElementsByClassName("userspan");
        for (var i = 0; i < userspan.length; i++) {
            if (i >= this.index) {
                userspan[i].remove();
                i--;
            }
        }
        user.splice(this.index + 1, user.length);
        console.log(user);
        cityitem.innerHTML = "";
        pushcreateelement();
    }
</script>
</body>
</html>