利用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();    
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章