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