三级联动效果

实现技术:三级联动;

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

1、初始代码
做好html部分的初始代码,三个select标签,不含option标签!
要点:请引入某个城市库的js文件;
三级联动效果_第1张图片
城市库图片:三级联动效果_第2张图片
2、初始下拉框的内容
目的:将下拉框的基本内容填充上;
难点:对于城市库代码中的数组引用;创建元素、追加元素;
三级联动效果_第3张图片
解难:setAttribute(“value”,? )——这个方法可以设置元素的属性,括号内的第一个值是你设置什么样的属性(名字自定义);括号内第二个值是设置这个属性的内容;
本步骤内容
1、分别获取三个下拉框标签;
2、并使用for循环遍历所有的省份或者城市或者学校;
3、for循环中,创建option标签;
4、html内容是省份中的第i个数组中的第二个值(也就是省份的名字);
5、value属性是第i个数组中的第一个值也就是选择内容的编号;
6、简单的遍历分别写出三次,省份、城市、学校都要写上;
要点:城市的数组编号是由省份的数组编号来匹对,学校的数组编号是由城市的的数组编号来匹对的;

3、内容改变后
目标:实现三级联动的效果;
事件:onchange()事件——当内容值更改时触发。
三级联动效果_第4张图片
要点:每次改变下拉框的内容需要将内容清空,否则改变后的内容只会在原来的基础上进行添加;
本步骤内容: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>

你可能感兴趣的:(JavaScript,效果,javascript,前端)