原生JS实现三级联动

╰半橙微兮° 2023-02-11 04:46 9阅读 0赞

## 效果展示 ##

在我们使用某个APP或者网站的时候，需要注册，那么会有地区选择，选择某个省，会自动列出这个省的所有城市，选择城市，会自动列出所有村镇，我们要实现的就是这个效果，在这里村镇就用每个省的学校来替代，完整代码已经上传到github：`https://github.com/caohongyu-crypto/Three-level-`，所有的省市信息我放在一个js文件里，省会是一个数组，城市和学校是对象(下面是部分信息截图)：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center]  
所有不需要向后台请求数据，效果如下：  
![在这里插入图片描述][20200521211244571.gif_pic_center]  
是不是感觉很简单，没错，就是很简单

## HTML部分 ##

html部分代码很简单，是三个select下拉列表，列表的子元素是JS动态生成，所以HTML部分很简洁，一目了然

## CSS部分代码 ##

CSS的代码就没什么好说的啦~~

*{ 
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    /* 页面背景颜色 */
    body{ 
        background: aliceblue;
    }
    .container{ 
        width: 300px;
        margin: 50px  auto;
    }
    /* 每个li的样式 */
    .container li.row{ 
        width: 100%;
        height: 42px;
        background: white;
        border-radius: 15px;
        margin-top: 10px;
    }
    /* 每个li里p元素的样式 */
    li.row p{ 
        display: inline-block;
        color: #16b7f7;
        line-height:42px ;
        padding: 0 10px;
    }
    /* 文字后面的竖线用伪元素表示 */
    li.row p::after{ 
        content: '|';
        color: #cccccc;
        padding: 0 0 0 15px;
    }
    
    li.row div{ 
        display: inline-block;
        width: 70%;
        height: 100%;
        
    }
    /* 下拉框的样式 */
    li.row div select{ 
        width: 100%;
        height: 30px;
        border-radius: 5px;
        border-color: aliceblue;
    }

## JS部分 ##

重头戏来啦，这里是实现JS逻辑的部分了，首先应该先分析数据：  
1,分析数据 ： 通过省会的二维数组中的 城市对应的数字 ----》 城市对象的属性 从而找到 对象城市数组  
\----》找到city对应的数字 -----》 院校的属性值 从而找到 对应的学院数组  
2，实践

省会数组中的每个值与城市对象属性名一一对应，城市对象的值是数组，数组中的代表编号的数字与学生对象的属性名一一对应。所有代码写在一个立即执行函数中，原因是可以防止变量污染，虽然这小demo也没啥可污染的，但是，毕竟编程需要仪式感！请看分析：

##### 省会的获取 #####

首先就是获取省会的数据，这里为什么我要把对省会的获取以及渲染封装在一个函数中呢，因为在后面有可能还要用到同样的代码，这样可以减少冗余。

//获取每个版块的node
        var provinceNode = document.getElementById('province');
        var cityNode = document.getElementById('city');
        var schoolNode = document.getElementById('school');
    
        //省会的获取
        /** * * @param {*} node 要渲染的父元素 * @param {*} arr 所需信息组成的数组 */
        function render(node, arr){ 
            var provinceStr = '';
            for(let i = 0; i < arr.length; i++){ 
                provinceStr += `<option value=${ arr[i][0]}>${ arr[i][1]}</option>`;
            }
            node.innerHTML = provinceStr;
        }
        render(provinceNode, province);

##### 城市的获取 #####

男人的第六感果然是准确的，这里就再次用到了render函数，所以可以一行代码解决的问题，坚决不用多行，自己不想办法偷懒，这怎么能行呢~~

//城市的获取
    	//根据省会的value值来判断渲染哪一个省的城市
        var cityArr = city[provinceNode.value];
        render(cityNode, cityArr);

##### 学校的获取 #####

到这里可能又问了，为什么上面已经封装过render函数了，这里怎么又写一遍呢？因为呢，学校的数据和上面省会、城市的有所不同，学校对象每个数组中有三个元素，前两个数字分别对应不同的省或者市，所以第三个值才是学校名称，因此重新封装了一个函数，那么有同学就说了，我就是不想重新封装，我就是要做一个会偷懒的程序猿，这也不是不可以，在render函数里加一个判断就可以了，或者使用三目运算符都可以。

//根据城市的value值判断渲染哪一个城市的学校
    var schoolArr = allschool[cityNode.value];
        function renderSchool(node, arr){ 
            var schoolStr = '';
            for(let i = 0; i <schoolArr.length; i++){ 
                schoolStr += `<option>${ schoolArr[i][2]}</option>`
            }
            schoolNode.innerHTML = schoolStr;
        }
        renderSchool(schoolNode, schoolArr);

到现在为止，省、市、学校的所有数据都获取到了，也都渲染到了页面上了，下面就是实现改变省、市来动态的变动相应数据了

## 动态更改数据 ##

当我们重新选择省会的时候，城市的学校都要改变，当我们重新选择城市的时候，学校要改变，省会不变，根据这个原则来实现

//改变下拉框的内容，重新渲染
        //省的下拉框改变，重新渲染市和学校
        provinceNode.onchange = function(){ 
            let value = this.value;
            cityArr = city[value];
            render(cityNode, cityArr);
            schoolArr = allschool[cityNode.value];
            renderSchool(schoolNode, schoolArr);
        }
    
        //城市改变，学校重新渲染
        cityNode.onchange = function(){ 
            let value = this.value;
            schoolArr = allschool[cityNode.value];
            renderSchool(schoolNode, schoolArr);
        }

每次触发onchange事件的时候都重新获取下拉列表的value值，并重新执行render和renderSchool函数，这样就可以实现啦，整个小demo就全部完成了。希望我的分享对您有些帮助吧！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200521211646970.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTk3NTU0,size_16,color_FFFFFF,t_70#pic_center
[20200521211244571.gif_pic_center]: https://img-blog.csdnimg.cn/20200521211244571.gif#pic_center