利用js的数组制作二级联动
前面的博客我们讲解js的数组及相关属性和方法，今天我们来说一下如何利用js的数组制作二级联动效果。当然，说到二级联动，跳不过的就是多维数组。
1.多维数组
// 多维数组：数组作为数组的项// 二维数组 两层数组// 二维数组的创建vararr=[1,2,3,4];//一维数组// 1.字面量方式声明vararr2=[[1,2,3],[1,2,3],[4,5,6]]; // 2. 采用构造函数 使用 new 关键字vararr3=newArray([1,2,3],[4,5,6],[7,8,9]); // 3.先声明 后赋值vararr4=newArray(); arr4[0]=["a","b","c"]; arr4[1]=["o","p","q"]; console.log(arr2); console.log(arr3); console.log(arr4); // 三维数组vararr5=[[[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(vari=0;i<arr.length;i++){ console.log(arr[i]); } // var arr3=new Array([1,2,3],[4,5,6],[7,8,9]);// 如何遍历二维数组for(varm=0;m<arr3.length;m++){ // console.log(arr3[m]);for(varn=0;n<arr3[m].length;n++){ console.log(arr3[m][n]) } }
3.二级联动
二级联动，简单来说就是要通过一个下拉列表的选项选中，从而在另一个select下拉列表中显示出对应的数据。比如我们出去旅游，在网订酒店，先选择省份，然后会显示出省份下所对应的城市。
html代码：
<formname="form1"action=""method="get"><selectid="a1"onchange="addOption()"></select><selectid="a2"></select></form>
JavaScript代码：
varcity=newArray; city['江苏'] = ['南京', '连云港', '苏州', '镇江']; city['山东'] = ['青岛', '烟台', '济南']; functionallCity() { varselect1=document.getElementById("a1"); for(variincity) { //这里注意遍历数组的写法select1.add(newOption(i, i), null); } addOption(); // 初始化选项 } functionaddOption() { varselect2=document.getElementById("a2"); varselect1=document.getElementById("a1").value; select2.length=0; //每次都先清空一下市级菜单 if(select1!='请选择省份') { for(variincity[select1 ]) { select2.add(newOption(city[select1][i], city[select1][i]), null); } }elseif (sheng=='请选择省份'){ select2.length=0; select2.add(newOption("请选择城市", "请选择城市"), null); } } allCity();
