利用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代码:
<form name="form1" action="" method="get">
<select id="a1" onchange="addOption()"></select>
<select id="a2"></select>
</form>
JavaScript代码:
var city = new Array;
city['江苏'] = ['南京', '连云港', '苏州', '镇江'];
city['山东'] = ['青岛', '烟台', '济南'];
function allCity() {
var select1 = document.getElementById("a1");
for(var i in city) { //这里注意遍历数组的写法
select1.add(new Option(i, i), null);
}
addOption(); // 初始化选项
}
function addOption() {
var select2 = document.getElementById("a2");
var select1 = document.getElementById("a1").value;
select2.length = 0; //每次都先清空一下市级菜单
if(select1 != '请选择省份') {
for(var i in city[select1 ]) {
select2.add(new Option(city[select1][i], city[select1][i]), null);
}
}else if (sheng == '请选择省份'){
select2.length = 0;
select2.add(new Option("请选择城市", "请选择城市"), null);
}
}
allCity();