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

女爷i 2024-04-18 13:00 27阅读 0赞

案例：自动式三级联动

### 零零碎碎 ###

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

#### 实现功能 ####

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

### 实现效果 ###

![在这里插入图片描述][2019090622402797.gif]

### 设计思路 ###

**顶部**

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]`，创建元素，设置样式，同理在每次添加元素之前先清空之前元素，否则在切换省份后没有删除：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

/*点击搜索按钮*/
        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();
       }

### 待改进 ###

将关闭按钮引入字体图标

[2019090622402797.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/11c345eb89184297a5db8882fc0b72e3.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ee68ded616ea4f91aec5d12c1c418501.png