写过一个无限的连动 但是数据员的方式跟你说的有点不一样<body>
<div id='sss'></div><br><br><br><br>
<div id='ssss'></div><br><br><br><br>
<div id='sssss'></div><br><br><br><br>
<div id='ssssss'></div><br><br><br><br>
<script>
var data = [] // ===============数据源接下面..
function $(Id){return document.getElementById(Id)};
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)}
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}
function create(elm,parent,fn){var element = document.createElement(elm);if(fn)fn(element);parent.appendChild(element);}
var extend = function()
{
var args = arguments;
if(!args[1])args = [this,args[0]];
for(var property in args[1])args[0][property] = args[1][property];
return args[0];
};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var newselect = new Class({
author:'Tz',
makeselect:function(){
var self =this;
for(var i = 0; i<this.num;i++)
{
this.container.innerHTML=this.container.innerHTML+" "+this.title[i];
create('select',this.container,function(obj){
if(i==0){for(var j=0;j<self.data.length;j++)obj.options.add(new Option(self.data[j].txt,j))}
})
}
var selects = this.container.getElementsByTagName("select");
addListener(selects[0],'change',function(){self.change(selects,self.data[selects[0].selectedIndex].menu,1)});
this.change(selects,this.data[0].menu,1,true);
},
change:function(selects,data,num,o){
if(!selects[num])return;
if(!data){if(selects[num])selects[num].length=0;return;}
var self =this;
selects[num].length=0;
for(var i=0;i<data.length;i++)
{selects[num].options.add(new Option(data[i].txt,i))}
if(o)
{
addListener(selects[num],'change',this.temporary=function(){self.change(selects,data[selects[num].selectedIndex].menu,(num+1))})
this.fsgevent.push([this.temporary,selects[num]])
}
else
{
for(var i =0 ;i<this.fsgevent.length;i++)
{if(selects[num]==this.fsgevent[i][1]){removeListener(selects[num],'change',this.fsgevent[i][0]);this.fsgevent.splice(i,1)}}
addListener(selects[num],'change',this.temporary=function(){self.change(selects,data[selects[num].selectedIndex].menu,(num+1))})
this.fsgevent.push([this.temporary,selects[num]])
}
o?(this.change(selects,data[selects[num].selectedIndex].menu,num+1,o)):(this.change(selects,data[selects[num].selectedIndex].menu,num+1))
},
initialize:function(){
this.container='';
this.fsgevent=[];
this.temporary
}
})
newselect.Getselect=function(arg){
return extend(new newselect,arg||{})
}
var gggggg= newselect.Getselect({container:$('ssssss'),data:data,num:5,title:['种族','英雄','选项','介绍','凑数']})
gggggg.makeselect()
var ggggg= newselect.Getselect({container:$('sssss'),data:data,num:4,title:['种族','英雄','选项','介绍']})
ggggg.makeselect()
var gggg= newselect.Getselect({container:$('ssss'),data:data,num:3,title:['种族','英雄','选项']})
gggg.makeselect()
var gggg= newselect.Getselect({container:$('sss'),data:data,num:2,title:['种族','英雄']})
gggg.makeselect()
</script>
</body>
<div id='sss'></div><br><br><br><br>
<div id='ssss'></div><br><br><br><br>
<div id='sssss'></div><br><br><br><br>
<div id='ssssss'></div><br><br><br><br>
<script>
var data = [] // ===============数据源接下面..
function $(Id){return document.getElementById(Id)};
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)}
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}
function create(elm,parent,fn){var element = document.createElement(elm);if(fn)fn(element);parent.appendChild(element);}
var extend = function()
{
var args = arguments;
if(!args[1])args = [this,args[0]];
for(var property in args[1])args[0][property] = args[1][property];
return args[0];
};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var newselect = new Class({
author:'Tz',
makeselect:function(){
var self =this;
for(var i = 0; i<this.num;i++)
{
this.container.innerHTML=this.container.innerHTML+" "+this.title[i];
create('select',this.container,function(obj){
if(i==0){for(var j=0;j<self.data.length;j++)obj.options.add(new Option(self.data[j].txt,j))}
})
}
var selects = this.container.getElementsByTagName("select");
addListener(selects[0],'change',function(){self.change(selects,self.data[selects[0].selectedIndex].menu,1)});
this.change(selects,this.data[0].menu,1,true);
},
change:function(selects,data,num,o){
if(!selects[num])return;
if(!data){if(selects[num])selects[num].length=0;return;}
var self =this;
selects[num].length=0;
for(var i=0;i<data.length;i++)
{selects[num].options.add(new Option(data[i].txt,i))}
if(o)
{
addListener(selects[num],'change',this.temporary=function(){self.change(selects,data[selects[num].selectedIndex].menu,(num+1))})
this.fsgevent.push([this.temporary,selects[num]])
}
else
{
for(var i =0 ;i<this.fsgevent.length;i++)
{if(selects[num]==this.fsgevent[i][1]){removeListener(selects[num],'change',this.fsgevent[i][0]);this.fsgevent.splice(i,1)}}
addListener(selects[num],'change',this.temporary=function(){self.change(selects,data[selects[num].selectedIndex].menu,(num+1))})
this.fsgevent.push([this.temporary,selects[num]])
}
o?(this.change(selects,data[selects[num].selectedIndex].menu,num+1,o)):(this.change(selects,data[selects[num].selectedIndex].menu,num+1))
},
initialize:function(){
this.container='';
this.fsgevent=[];
this.temporary
}
})
newselect.Getselect=function(arg){
return extend(new newselect,arg||{})
}
var gggggg= newselect.Getselect({container:$('ssssss'),data:data,num:5,title:['种族','英雄','选项','介绍','凑数']})
gggggg.makeselect()
var ggggg= newselect.Getselect({container:$('sssss'),data:data,num:4,title:['种族','英雄','选项','介绍']})
ggggg.makeselect()
var gggg= newselect.Getselect({container:$('ssss'),data:data,num:3,title:['种族','英雄','选项']})
gggg.makeselect()
var gggg= newselect.Getselect({container:$('sss'),data:data,num:2,title:['种族','英雄']})
gggg.makeselect()
</script>
</body>
{"txt":"人族","menu":[
{"txt":"大法师","menu":[
{"txt":"大法技能","menu":[
{"txt":"水元素","menu":[
{"txt":"召唤物"},
{"txt":"穿刺攻击"},
{"txt":"很好东西"}
]},
{"txt":"暴风雪"},
{"txt":"辉煌光环"},
{"txt":"瞬间移动"}
]},
{"txt":"英雄说明","menu":[
{"txt":"智力英雄"},
{"txt":"强大光环"},
{"txt":"辅助型"},
]} ]},
{"txt":"山丘之王","menu":[
{"txt":"山丘技能","menu":[
{"txt":"风暴之锤"},
{"txt":"锥地"},
{"txt":"锥晕"},
{"txt":"天神下凡"}
]},
{"txt":"英雄说明","menu":[
{"txt":"力量英雄"},
{"txt":"秒杀能力"},
{"txt":"个子很矮"},
{"txt":"大技变态"}
]} ]},
{"txt":"圣骑士","menu":[
{"txt":"圣骑技能","menu":[
{"txt":"光"},
{"txt":"无敌"},
{"txt":"光环"},
{"txt":"复活"}
]},
{"txt":"英雄说明","menu":[
{"txt":"力量英雄"},
{"txt":"辅助英雄"},
{"txt":"人称奶妈"}
]}
]},
{"txt":"血法师","menu":[
{"txt":"血法技能","menu":[
{"txt":"火焰"},
{"txt":"吸蓝"},
{"txt":"虚无"},
{"txt":"神鸟凤凰"}
]},
{"txt":"英雄说明","menu":[
{"txt":"智力英雄"},
{"txt":"辅助英雄"},
{"txt":"长的很帅"}
]}
]}
]},
{"txt":"兽族","menu":[
{"txt":"贱圣","menu":[
{"txt":"贱圣技能","menu":[
{"txt":"疾风步"},
{"txt":"影分身"},
{"txt":"致命一击"},
{"txt":"剑刃风暴"}
]},
{"txt":"英雄说明","menu":[
{"txt":"敏捷英雄"},
{"txt":"高攻英雄"},
{"txt":"杀人越货"},
{"txt":"猥亵无敌"},
{"txt":"非常强大"}
]}
]},
{"txt":"先知男","menu":[
{"txt":"先知技能","menu":[
{"txt":"狼"},
{"txt":"日"},
{"txt":"闪电链"},
{"txt":"地震"}
]},
{"txt":"英雄说明","menu":[
{"txt":"智力英雄"},
{"txt":"骚扰英雄"}
]}
]},
{"txt":"牛头人酋长","menu":[
{"txt":"牛头技能","menu":[
{"txt":"冲击波"},
{"txt":"阵地"},
{"txt":"耐久光环"},
{"txt":"复活"}
]},
{"txt":"英雄说明","menu":[
{"txt":"力量英雄"},
{"txt":"魔法强大"},
{"txt":"长的威猛"},
{"txt":"一个肉盾"}
]}
]},
{"txt":"小YY","menu":[
{"txt":"小Y技能","menu":[
{"txt":"变动物"},
{"txt":"治疗波"},
{"txt":"小蛇棒子"},
{"txt":"全体无敌"}
]},
{"txt":"英雄说明","menu":[
{"txt":"敏捷英雄"},
{"txt":"魔法强大"},
{"txt":"辅助英雄"}
]}
]}
]},
{"txt":"不死族","menu":[
{"txt":"死亡骑士","menu":[
{"txt":"亡骑技能"},
{"txt":"英雄说明"}
]},
{"txt":"巫妖","menu":[
{"txt":"巫妖技能"},
{"txt":"英雄说明"}
]},
{"txt":"恐惧魔王"},
{"txt":"小强王子"}
]}
];