<!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>