纯js三维数组实现三级联动效果

首先，要实现三级联动效果，我们需要先了解什么是三维数组。三维数组就是一个数组中包含着多个二维数组，而每个二维数组中又包含着多个一维数组，这样一层层嵌套下去，就形成了三维数组。在实现三级联动效果时，我们可以使用三维数组来实现。

下面是一个简单的示例代码，实现了一个三维数组，并打印出其中的一个元素：

var arr = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]];
console.log(arr[1][0][1]);   // 输出：6

接下来，我们就可以使用这个三维数组来实现三级联动效果。

步骤1：创建三个下拉框，并为它们添加id属性

<select id="province"></select>
<select id="city"></select>
<select id="area"></select>

步骤2：创建三维数组，并填充数据

var area = [
    {
        name: '浙江省',
        city: [
            {
                name: '杭州市',
                area: ['西湖区', '余杭区']
            },
            {
                name: '宁波市',
                area: ['江北区', '北仑区']
            }
        ]
    },
    {
        name: '广东省',
        city: [
            {
                name: '广州市',
                area: ['天河区', '番禺区']
            },
            {
                name: '深圳市',
                area: ['福田区', '罗湖区']
            }
        ]
    }
];

步骤3：为省份下拉框填充数据

var provinceSelect = document.getElementById('province');
for (var i = 0; i < area.length; i++) {
    var option = document.createElement('option');
    option.value = i;
    option.text = area[i].name;
    provinceSelect.add(option);
}

步骤4：根据省份下拉框的选择，在城市下拉框中显示对应的城市

var citySelect = document.getElementById('city');
provinceSelect.onchange = function() {
    citySelect.length = 0;
    var provinceIndex = provinceSelect.value;
    var cities = area[provinceIndex].city;
    for (var i = 0; i < cities.length; i++) {
        var option = document.createElement('option');
        option.value = i;
        option.text = cities[i].name;
        citySelect.add(option);
    }
};

步骤5：根据城市下拉框的选择，在区县下拉框中显示对应的区县

var areaSelect = document.getElementById('area');
citySelect.onchange = function() {
    areaSelect.length = 0;
    var provinceIndex = provinceSelect.value;
    var cityIndex = citySelect.value;
    var areas = area[provinceIndex].city[cityIndex].area;
    for (var i = 0; i < areas.length; i++) {
        var option = document.createElement('option');
        option.value = i;
        option.text = areas[i];
        areaSelect.add(option);
    }
};

这样，一个简单的三级联动效果就实现了。这个例子中，我们使用了一个简单的三维数组来存储省、市、区县的信息，并使用纯js来实现了下拉框的联动效果。

下面是另一个示例，演示了如何使用三维数组来实现一个简单的日历功能：

var calendar = [
    [
        [1, 2, 3, 4, 5, 6, 7],
        [8, 9, 10, 11, 12, 13, 14],
        [15, 16, 17, 18, 19, 20, 21],
        [22, 23, 24, 25, 26, 27, 28]
    ],
    [
        [1, 2, 3, 4, 5, 6, 7],
        [8, 9, 10, 11, 12, 13, 14],
        [15, 16, 17, 18, 19, 20, 21],
        [22, 23, 24, 25, 26, 27, 28],
        [29, 30]
    ]
];

在这个例子中，我们使用了一个三维数组来存储每个月的日历信息。第一维是月份，第二维是每行日期，第三维是每个日期的具体数字。由于每个月的天数不同，因此第二维的长度也不一定相同。我们可以通过遍历这个三维数组，然后使用html和css来创建一个日历表格，并将每个月份的日期填充到表格中。

以上就是关于纯js三维数组实现三级联动效果的完整攻略及两个示例说明。