二维数组
定义
- 数组嵌套,在数组中每一个元素又是一个数组
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>