自动式三级联动（面试题）

案例：自动式三级联动

零零碎碎

1. 在设置border-box之前边框向内设置
2. 行内标签不能设置上下的margin（span）

实现功能

搜索框实现智能提示（检测关键字）并将相应的市区显示在下面
市区可以选中或取消（之后的街道等选项都要随之更改）

实现效果

设计思路

顶部

1. 使用onkeyup获取当前输入的内容，使用for循环遍历数据，indexof查找替换，如果存在，将名称写入li中（创建），追加到ul中，每次添加元素之前先清空之前元素
   没有内容时按删除键会显示所有省份名称(未理解indexof如何匹配空字符)
2. 显示省份后选中li中的内容，显示在文本框中，下拉菜单隐藏，给li添加类名称后要重新获取到元素！添加事件监听写点击选项后的事件

    province.onkeyup = function () {
        prolist.style.display = "block";
        prolist.innerHTML = "";
        for (var i = 0; i < city.length; i++) {
            if (city[i].name.indexOf(this.value) != -1) {
                var list = document.createElement("li");
                list.className = "liList";
                list.addEventListener("click", showli);
                list.setAttribute("data-index", i);
                list.innerHTML = city[i].name;
                prolist.appendChild(list);
            }
        }
    }
    /*显示包含关键字的省份选项*/
    function showli() {
//        console.log(this.getAttribute("data-index"));
        province.value = this.innerHTML;
        province.setAttribute("data-index", this.getAttribute("data-index"));
        prolist.style.display = "none";
    }

点击搜索后
3. 设置自定义属性，每个Li上会有data-index值，因为list是局部变量所以拿不到值，动态创建的元素也不能通过类名称（全局变量）设置自定义属性，所以创建获取后传值给文本框
4. 点击搜索按钮后取索引（getattribute），遍历当前省份下的城市city[index]，创建元素，设置样式，同理在每次添加元素之前先清空之前元素，否则在切换省份后没有删除：

    /*点击搜索按钮*/
    search.onclick = function () {
        var index = province.getAttribute("data-index");
        select.innerHTML = "";
        /*遍历创建span*/
        /*市存入数组*/
        user.push(city[index].child);
        createle();
    }

在之后为了简化代码提出来的需要重复调用的部分

    function createle() {
        for (var i = 0; i < user[user.length-1].length; i++) {
            var span = document.createElement("span");
            span.className = "spanlist";
            span.innerHTML = user[user.length-1][i].name;
            select.appendChild(span);
            /*当前点击的市绑定索引*/
            span.index = i;
            span.addEventListener("click", spanclick);
        }
    }

市的点击函数

1. 在市显示后设置事件监听，添加函数
2. 函数中主要为创建元素将市显示在区域中，并添加取消功能
3. 点击后清空下方选择区域
4. 当前点击的市还需要绑定索引，因为需要继续查找市下面的区
5. 重点
   因为之后需要删除或者重新选中市的数据，建立一个数组保存数据，将重复调用的方法封装起来，传递index参数，调整相关固定数据修改为动态传递，每次点击后将下一层所有元素存入，当取到最底层的元素时要处理length=undifined的情况

   /*span市的点击事件*/
    function spanclick() {
        /*添加元素前先清空下方区域*/
        select.innerHTML = "";
        var span = document.createElement("span");
        span.className = "usersure";
        span.innerHTML = this.innerHTML;
        sure.appendChild(span);
        /*添加删除图标*/
        var cha = document.createElement("span");
        cha.addEventListener("click",close);
        cha.innerHTML = "x";
        cha.index=user.length-1;//设置索引
        cha.className = "close";
        span.appendChild(cha);
        /*区*/
        if(user[user.length-1][this.index].child==undefined){
            return;
        }
        user.push(user[user.length-1][this.index].child);
        createle();
    }

点击x关闭函数

1. 设置索引(在添加时设置)并获取索引
2. 点击后移除其后所有元素（大于当前索引）
   Remove将元素在页面中移除
   关闭删除掉后面的元素后还要在框中显示当前元素的下一级元素，直接调用上面写好的函数，在调用前将框里的内容清空

    /*cha按钮关闭事件*/
   function close(){
       /*移除其后所有内容*/
       var usersure=document.getElementsByClassName("usersure");
       for(var i=0;i<usersure.length;i++){
           if(i>=this.index){
               console.log(this.index);
               usersure[i].remove();
               i--;
           }
       }
       user.splice(this.index+1,user.length);
       console.log(user);
       select.innerHTML = "";
       createle();
   }

待改进

将关闭按钮引入字体图标