JavaScript二维数组

最新推荐文章于 2022-12-07 18:39:53 发布

还没有秃头的猴

最新推荐文章于 2022-12-07 18:39:53 发布

阅读量241

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_54419847/article/details/115390464

版权

二维数组

定义

数组嵌套，在数组中每一个元素又是一个数组

var arr = [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9]
        ];

二维数组遍历

for (var i = 0; i < arr.length; i++) {
	for (var j = 0; j < arr[i].length; j++) {
		console.log(arr[i][j]);
            }
        }

二维数组应用

二级联动菜单

<script>
        var data = [
            ['北京', '海淀', '朝阳', '大兴', '昌平', '丰台', '密云', '怀柔', '房山', '东城', '西城'],
            ['上海', '宝山', '杨浦', '浦东', '浦西', '松江', '静安', '徐汇', '闵行'],
            ['杭州', '江干', '余杭', '萧山', '滨江', '西湖', '富阳', '钱塘新区'],
            ['广州', '白云', '天河', '越秀', '番禺', '海珠']
        ];

        // 二级联动菜单
        window.onload = function() {
            var city = document.getElementById('city');
            var area = document.getElementById('area');

            // 1. 将城市名称加载到city中
            var citynm = '';
            for (var i = 0; i < data.length; i++) {
                citynm += '<option value="' + i + '">' + data[i][0] + '</option>';
            }
            city.innerHTML += citynm;

            // 2. 选择城市 加载地区 
            // 使用 change事件解决问题
            city.onchange = function() {
                // console.log(city.value);

                if (city.value == '-1') {
                    area.innerHTML = '<option value="">请选择城市</option>';
                    return;
                }

                var areanm = '';
                for (var i = 1; i < data[city.value].length; i++) {
                    areanm += '<option>' + data[city.value][i] + '</option>';
                }
                area.innerHTML = areanm;
            }
        }
    </script>

<body>
    <select id="city">
        <option value="-1">请选择城市</option>
    </select>
    <select id="area">
        <option value="">请选择城市</option>
    </select>
</body>

还没有秃头的猴

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript二维数组

二维数组定义数组嵌套，在数组中每一个元素又是一个数组var arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ];二维数组遍历for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr[i].length; j++) { console.log(arr[i][j]);
复制链接

扫一扫