js 聯動下拉菜單
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js 聯動下拉菜單</title>
<script>
window.onload=function()
{
var s1=new Sel(‘div1‘);
// 數據
s1.add(‘0‘,[‘1‘,‘2‘,‘3‘]);
s1.add(‘0_0‘,[‘1_1‘,‘1_2‘,‘1_3‘]);
s1.add(‘0_0_0‘,[‘1_1_1‘,‘1_1_2‘,‘1_1_3‘]);
s1.add(‘0_0_1‘,[‘1_2_1‘,‘1_2_2‘,‘1_2_3‘]);
s1.add(‘0_0_2‘,[‘1_3_1‘,‘1_3_2‘,‘1_3_3‘]);
s1.add(‘0_1‘,[‘2_1‘,‘2_2‘,‘2_3‘]);
s1.add(‘0_1_0‘,[‘2_1_1‘,‘2_1_2‘,‘2_1_3‘]);
s1.add(‘0_1_1‘,[‘2_2_1‘,‘2_2_2‘,‘2_2_3‘]);
s1.add(‘0_1_2‘,[‘2_3_1‘,‘2_3_2‘,‘2_3_3‘]);
s1.add(‘0_2‘,[‘3_1‘,‘3_2‘,‘3_3‘]);
s1.add(‘0_2_0‘,[‘3_1_1‘,‘3_1_2‘,‘3_1_3‘]);
s1.add(‘0_2_1‘,[‘3_2_1‘,‘3_2_2‘,‘3_2_3‘]);
s1.add(‘0_2_2‘,[‘3_3_1‘,‘3_3_2‘,‘3_3_3‘]);
s1.init(3); // 幾個下拉框
}
function Sel(id)
{
this.oParent=document.getElementById(id); //選擇容器
this.data={}; // 存放數據
this.aSel=this.oParent.getElementsByTagName(‘select‘); // 創建容器中的 select 下拉框
}
Sel.prototype=
{
init:function(num)
{
var This=this;
for(var i=1;i<=num;i++)
{
var oSel=document.createElement(‘select‘);
var opt=document.createElement(‘option‘);
opt.innerHTML=‘默認‘; // 每個下拉框的初始值
oSel.appendChild(opt); // 每個下拉框的初始元素
oSel.index=i; //1,2,3
this.oParent.appendChild(oSel); // 添加初始元素
oSel.onchange=function() // 當下拉框改變的時候
{
This.change(this.index);
}
}
this.first();//創建第一個
},//初始化對象
add:function(key,val)
{
this.data[key]=val;
},//添加數據
first:function()
{
var arr=this.data[‘0‘];
for(var i=0;i<arr.length;i++)
{
var opt=document.createElement(‘option‘);
opt.innerHTML=arr[i];
this.aSel[0].appendChild(opt);
}
},//創建第一個下拉菜單----元素添加數據
change:function(now)
{
var str=‘0‘;
for(i=0;i<now;i++) //now====0,1,2 如果now=0,循環時str=0_0
{
str+=‘_‘+(this.aSel[i].selectedIndex-1);
//取得當前選中元素的下一級的數據
}
if(this.data[str]) //如果有數據
{
var arr=this.data[str];
this.aSel[now].options.length=1;
for(var i=0;i<arr.length;i++)
{
var opt=document.createElement(‘option‘);
opt.innerHTML=arr[i];
this.aSel[now].appendChild(opt);
} // -------------------------------添加數據
this.aSel[now].options[1].selected=true;
now++;
if(now<this.aSel.length)
{
this.change(now); // 更新下級
}
}
else
{
for(var i=now;i<this.aSel.length;i++)
{
this.aSel[i].options.length=1;
}// 返回默認值
}
}, // -------------------------change 結束
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
js 聯動下拉菜單