三级联动效果

最新推荐文章于 2021-10-20 09:27:02 发布

RixRenex

最新推荐文章于 2021-10-20 09:27:02 发布

阅读量353

点赞数

分类专栏： JavaScript 效果文章标签： javascript 前端

本文链接：https://blog.csdn.net/ZunXin_2580/article/details/113540036

版权

效果同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

实现技术：三级联动；

详解：省级下拉框选择省份后，城市下拉框的选择要跟着省级变动，院校同样。

1、初始代码
做好html部分的初始代码，三个select标签，不含option标签！
要点：请引入某个城市库的js文件；
在这里插入图片描述
城市库图片：
2、初始下拉框的内容
目的：将下拉框的基本内容填充上；
难点：对于城市库代码中的数组引用；创建元素、追加元素；

解难：setAttribute(“value”,? )——这个方法可以设置元素的属性，括号内的第一个值是你设置什么样的属性（名字自定义）；括号内第二个值是设置这个属性的内容；
本步骤内容：
1、分别获取三个下拉框标签；
2、并使用for循环遍历所有的省份或者城市或者学校；
3、for循环中，创建option标签；
4、html内容是省份中的第i个数组中的第二个值（也就是省份的名字）；
5、value属性是第i个数组中的第一个值也就是选择内容的编号；
6、简单的遍历分别写出三次，省份、城市、学校都要写上；
要点：城市的数组编号是由省份的数组编号来匹对，学校的数组编号是由城市的的数组编号来匹对的；

3、内容改变后
目标：实现三级联动的效果；
事件：onchange()事件——当内容值更改时触发。
在这里插入图片描述
要点：每次改变下拉框的内容需要将内容清空，否则改变后的内容只会在原来的基础上进行添加；
本步骤内容：1、对不必要的重复代码将封装成函数，方便调用；2、对省份下拉框和城市下拉框进行onchange事件的绑定；3、省份下拉框和城市下拉框内容改变后重新刷新一次城市和学院内容；

技术点总结：难点主要是在于看城市库中的数组。数组的多样化看得人眼睛疼，常常会因为遍历不出来全部的内容上头。第一次做很难，做完后回过头再看，挺简单的。

js源码。

window.onload = function () {
    var provinceNode = document.getElementById("province") //省份
    var cityNode = document.getElementById("city") //城市
    var schoolNode = document.getElementById("school") //学校

    // 省份
    for (var i = 0; i < province.length; i++) {
        var option1 = document.createElement("option")
        option1.innerHTML = "" + province[i][1] + ""
        option1.setAttribute("value", "" + province[i][0] + "")
        provinceNode.append(option1)
    }
    // 城市
    cityArrif()
    // 学校
    schoolif()
    
    // 省份改变时
    provinceNode.onchange = function(){
        // 改变市级
        cityNode.innerHTML = ""
        cityArrif()
        // 改变学校
        schoolNode.innerHTML = ""
        schoolif()
    }
    // 城市改变时
    cityNode.onchange = function(){
        // 改变学校
        schoolNode.innerHTML = ""
        schoolif()
    }

    function cityArrif(){
        var cityArr = city[provinceNode.value];
        for (var i = 0; i < cityArr.length; i++) {
            var option2 = document.createElement("option")
            option2.innerHTML = ""+cityArr[i][1]+"";
            option2.setAttribute("value",""+cityArr[i][0]+"")
            cityNode.appendChild(option2)
        }
    }
    function schoolif(){
        var schoolArr = allschool[cityNode.value]
        for(var i = 0; i < schoolArr.length; i++){
            // 学校
            var option3 = document.createElement("option")
            option3.innerHTML = ""+schoolArr[i][2]+"";
            schoolNode.appendChild(option3)
        }
    }

}

html源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三级联动效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        body {
            background: #ccc;
        }

        .container {
            width: 300px;
            margin: 100px auto;
        }

        .container .row {
            width: 100%;
            height: 42px;
            background: #fff;
            margin-top: 10px;
            border-radius: 10px;
        }

        .label {
            display: inline-block;
            line-height: 40px;
            color: #03a9f4;
            padding: 0 10px 0 10px;
        }

        .label::after {
            content: "|";
            color: #ccc;
            padding: 0 0 0 20px;
            font-weight: 200;
        }

        select {
            width: 70%;
            height: 30px;
            border-color: aliceblue;
            border-radius: 5px;
        }
    </style>
</head>

<body>

    <ul class="container">
        <li class="row">
            <p class="label">省 份</p>
            <select name="province" id="province">
                <!-- <option>其他</option> -->
            </select>
        </li>
        <li class="row">
            <p class="label">城 市</p>
            <select name="city" id="city"></select>
        </li>
        <li class="row">
            <p class="label">院 校</p>
            <select name="school" id="school"></select>
        </li>
    </ul>

    <script src="js/AllSchool.js"></script>
    <script src="js/index.js"></script>
    
</body>

</html>

RixRenex

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三级联动效果

实现技术：三级联动；详解：省级下拉框选择省份后，城市下拉框的选择要跟着省级变动，院校同样。1、初始代码做好html部分的初始代码，三个select标签，不含option标签！要点：请引入某个城市库的js文件；城市库图片：2、初始下拉框的内容目的：将下拉框的基本内容填充上；难点：对于城市库代码中的数组引用；创建元素、追加元素；解难：setAttribute(“value”,? )——这个方法可以设置元素的属性，括号内的第一个值是你设置什么样的属性（名字自定义）；括号内第二个值是设置这个属
复制链接

扫一扫