利用js的数组制作二级联动

利用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();