原生js实现三级联动

最新推荐文章于 2022-06-23 23:05:14 发布

crazy的蓝色梦想

最新推荐文章于 2022-06-23 23:05:14 发布

阅读量4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js实战案例文章标签：原生js实现三级联动

本文链接：https://blog.youkuaiyun.com/qq_41257129/article/details/88915880

js实战案例专栏收录该内容

15 篇文章

订阅专栏

在这里插入图片描述
简单的三级联动，锻炼逻辑思维
js部分有注释

<!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>Document</title>
    <script type="text/javascript" src="AllSchool.js"></script>
    <style>
        *{
           padding: 0;
           margin: 0; 
           list-style: none;
        }
        body{
            background-color:aliceblue;
        }
        .wrapper{
            width: 300px;
            margin: 100px auto;
        }
        .wrapper ul .row{
            margin-top:10px;
            width: 100%;
            height: 42px;
            border-radius: 14px;
            background-color: #fff;
            line-height: 40px;
        }
        .wrapper ul .row span{
            margin: 0 8px;
            color: rgb(76, 154, 226);
        }
        .wrapper ul .row span::after {
            content: "|";
            color: #ccc;
            margin-left: 13px;
        }
        .wrapper ul .row select{
            width: 70%;
            height: 30px;
            border-radius: 5px;
            border-color: aliceblue;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li class="row">
                <span>省 会</span>
                <select name="" id="province">
                </select>
            </li>
            <li class="row">
                <span>城 市</span>
                <select name="" id="city"></select>
            </li>
            <li class="row">
                <span>学 校</span>
                <select name="" id="shcool"></select>
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    /*
        1: 创建option
        2: 根据数据进行三级联动 
        创建初始值时，城市是默认省份对应所有城市(这里是北京市)
        学校是相对应城市的学校
        联动时，最重要的是找到关联的条件 用当前改变的值得value进行关联
    */
    // 获取元素
    function $(id){
        return document.getElementById(id);
    }
    // 创建省份
    var selectStr = '';// 省会的字符串
    for(var i = 0;i < province.length; i ++)
    {
        selectStr += "<option value =" +province[i][0]+ ">" +province[i][1]+" </option>";
    }
    $('province').innerHTML = selectStr;
     
    // 创建城市
    var value = createCity(province[0][0]);// //createCity()函数的返回值
    createSchool(value);
      
    //创建学校 
    createSchool(value);
   

    // 省级联动
    $('province').onchange = function(){  
        var value = createCity(this.value);//createCity()函数的返回值
        createSchool(value);
    }

    // 城市联动
    $('city').onchange = function(){
        createSchool(this.value);
    }


    // 创建城市函数
    function createCity(value){
        var cityNode = city[value];// 关联(初始值取第一个)
        var select2Str = '';
        for(var i = 0 ; i < cityNode.length; i++)
        {     
            select2Str += "<option value="+ cityNode[i][0]+ ">" +cityNode[i][1]+"</option>"
        }
       $('city').innerHTML = select2Str;
       return cityNode[0][0];
    }
    // 创建学校函数
    function createSchool(value){
        var shcoolNode = allschool[value];// 关联(初始值取第一个)
        var select3Str = '';
        for(var i = 0 ; i < shcoolNode.length; i++)
        {     
            select3Str += "<option>" + shcoolNode[i][2] +"</option>"
        }
        $('shcool').innerHTML= select3Str;
    };
 </script>