利用js的数组制作二级联动

爱被打了一巴掌 2023-02-12 05:57 127阅读 0赞

## 利用js的数组制作二级联动 ##

前面的博客我们讲解js的数组及相关属性和方法，今天我们来说一下如何利用js的数组制作二级联动效果。当然，说到二级联动，跳不过的就是多维数组。

#### 1.多维数组 ####

// 多维数组：数组作为数组的项
        // 二维数组 两层数组
        // 二维数组的创建
        var arr=[1,2,3,4];//一维数组
        // 1.字面量方式声明
        var arr2=[[1,2,3],[1,2,3],[4,5,6]];
        // 2. 采用构造函数 使用 new 关键字
        var arr3=new Array([1,2,3],[4,5,6],[7,8,9]);
        // 3.先声明 后赋值
        var arr4=new Array();
        arr4[0]=["a","b","c"];
        arr4[1]=["o","p","q"];
    
        console.log(arr2);
        console.log(arr3);
        console.log(arr4);
    
        // 三维数组
        var arr5=[[[1,2,3],[4,5,6]],["a","b"]];
        console.log(arr5);
    
        // 二维数组的访问
        console.log(arr2[0][0]);
        arr2[0][0]="hello";
        console.log(arr2);

#### 2.二维数组的遍历 ####

// 一维数组的遍历
        for(var i=0;i<arr.length;i++){ 
            console.log(arr[i]);
        }
    
        // var arr3=new Array([1,2,3],[4,5,6],[7,8,9]);
        // 如何遍历二维数组
        for(var m=0;m<arr3.length;m++){ 
            // console.log(arr3[m]);
            for(var n=0;n<arr3[m].length;n++){ 
                console.log(arr3[m][n])
            }
        }

#### 3.二级联动 ####

二级联动，简单来说就是要通过一个下拉列表的选项选中，从而在另一个select下拉列表中显示出对应的数据。比如我们出去旅游，在网订酒店，先选择省份，然后会显示出省份下所对应的城市。

html代码：

JavaScript代码：