The code is very simple. Here I mainly recommend the implementation ideas of this code to you, which are unique.
Provide the code:
The code copy is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Selects</title>
<style type="text/css">
*{font-size:14px;}
select{height:20px;font-size:12px;}
</style>
</head>
<body >
<div style='color:red'>2-level linkage</div>
<div id='demo1'></div><br><br><br>
<div style='color:red'>3-level linkage</div>
<div id='demo2'></div><br><br><br>
<div style='color:red'>4-level linkage</div>
<div id='demo3'></div><br><br><br>
<div style='color:red'>5-level linkage</div>
<div id='demo4'></div><br><br><br>
<script language="javascript">
var Sys = (function(ua){
var s = {};
s.IE = ua.match(/msie ([/d.]+)/)?true:false;
s.Firefox = ua.match(/firefox//([/d.]+)/)?true:false;
s.Chrome = ua.match(/chrome//([/d.]+)/)?true:false;
s.IE6 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;
s.IE7 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;
s.IE8 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;
return s;
})(navigator.userAgent.toLowerCase());
Sys.IE6&&document.execCommand("BackgroundImageCache", false, true);
function $(Id){
return document.getElementById(Id);
};
function $$(p,e){
return p.getElementsByTagName(e);
};
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);
};
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
};
};
var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
};
};
var Extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
};
};
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 Selects = new Class({
initialize :function(container,data, title){
this.container = container;
this.num = title.length;
this.Events = new Array(title.length-1);
var i,l,select;
for(i=0; i<this.num ; i++)
{
container.innerHTML = container.innerHTML + " " + title[i];
container.appendChild(document.createElement('select'));
}
select = $$(container,'select')[0];
for(i=0,l=data.length;i<l;i++)
select.options.add(new Option(data[i].txt,i));
addListener(select,'change',Bind(this, this.Change,select,data,0));
this.Change(select,data,0);
},
Change : function(obj,data,num){
if(num == this.num-1)return;
var menu = data[obj.value].menu;
select = $$(this.container,'select')[num+1];
select.length = 0;
if(!menu)return;
if(this.Events[num]!=undefined)removeListener(select,'change',this.Events[num])
this.Events[num] = Bind(this,this.Change,select,menu,num+1)
addListener(select,'change',this.Events[num]);
for(var i=0,l=menu.length;i<l;i++)
select.options.add(new Option(menu[i].txt,i));
this.Change(select,menu,num+1);
}
});
//==========================================================================================================================
window.onload = function(){
var data=[{"txt":"Human race","menu":[{"txt":"Magic Master","menu":[{"txt":"Magic Skill","menu":[{"txt":"Water Element","menu":[{"txt":"Summoning"},{"txt":"Puncture Attack"},{"txt":"Great Things"}]},{"txt":"Snowstorm","menu":[{"txt":"Magic Attack"},{"txt":"Area Damage"},{"txt":"Very Beautiful"},{"txt":"Can be interrupted"}]},{"txt":"Glorious Halo"},{"txt":"Move in a Moment}]},{"txt" :"Hero Description","menu":[{"txt":"Intellect Hero"},{"txt":"Strong Halo"},{"txt":"Auxiliary"},]}]},{"txt":"King of the Hill","menu":[{"txt":"Hammer Skill","menu":[{"txt":"Storm Hammer"},{"tx t":"cone ground"},{"txt":"cone diaphragm"},{"txt":"Hero description","menu":[{"txt":"Strength hero"},{"txt":"Flash kill ability"},{"txt":"Short"},{"txt":"Great skill pervert"}]}]}]},{"tt"t":"Great skill pervert"}]}]}]},{"tt"t":"Short"}]}]},{"t"t" xt":"Paladin","menu":[{"txt":"Paladin skill","menu":[{"txt":"Light"},{"txt":"Invincible"},{"txt":"Hara"},{"txt":"Resurrection"}]},{"txt":"Hero description","menu":[{"txt":"Strength Hero" },{"txt":"Assisted Hero"},{"txt":"Personal Hunt"}]}]},{"txt":"Blood Mage","menu":[{"txt":"Blood Mage Skill","menu":[{"txt":"Flame"},{"txt":"Blue-absorbing"},{"txt":"Nonsity"},{"txt":"Divine Bird Phoenix"}]},{"txt":"Hero description","menu":[{"txt":"Intellect hero"},{"txt":"Assisted hero"},{"txt":"Such handsome"}]}]}]}]},{"txt":"Beast clan","menu":[{"txt":"Silent saint","menu":[{"txt":" The saint skill","menu":[{"txt":"Sky Step"},{"txt":"Shadow Clones"},{"txt":"Critical Strike"},{"txt":"Blade Storm"}]},{"txt":"Hero Description","menu":[{"txt":"Agile Hero"},{"txt":"High Attack Hero"},{" txt":"Killing and robbing"},{"txt":"Indecent and invincible"},{"txt":"Very powerful"}]}]}]},{"txt":"Prophet man","menu":[{"txt":"Prophet skill","menu":[{"txt":"Wolf"},{"txt":"Day"},{"txt":"Lightning chain"}, {"txt":"Earthquake"}]},{"txt":"Hero description","menu":[{"txt":"Intellect hero"},{"txt":"Harassment hero"}]}]}]},{"txt":"Tatou Chief","menu":[{"txt":"Shockwave" },{"txt":"Position"},{"txt":"Durability Halo"},{"txt":"Resurrection"}]},{"txt":"Hero Description","menu":[{"txt":"Strength Hero"},{"txt":"Magic Power"},{"txt":"Long Powerful"},{"txt":"A Meat Shield"}]}]}]},{"txt":"Small YY","menu":[{"txt":"Small Y Skill","menu":[{"txt":"Change Animal"},{"txt":"Health Wave"},{"txt":"Little Snake Stick"},{"txt":"Everything Invincible"}]},{"txt":"Hero Description","menu":[ {"txt":"Agile Hero"},{"txt":"Magic Power"},{"txt":"Assisted Hero"}]}]}]}]}]},{"txt":"Undead","menu":[{"txt":"Death Knight","menu":[{"txt":"Dead Rider Skill","menu":[{txt:"Stool Tumblr"} ,{txt:"Evil Halo"},{txt:"Death Contract"},{txt:"Resurrection of the Dead"}]},{"txt":"Hero Description","menu":[{txt:"Riding a sheep"},{txt:"Before old age"},{txt:"Frost sorrow"},{txt:"Ah Seth"}]}]}]},{"txt":" Lich","menu":[{"txt":"Lich skill","menu":[{txt:"Raging ice"},{txt:"Ice armor"},{txt:"Contract"},{txt:"Death and Withering"}]},{"txt":"Hero description","menu":[{txt:"Wearing a skirt"},{txt:"All bones"} ,{txt:"No man or woman"}]}]}]},{"txt":"Fear Demon King","menu":[{"txt":"Demon King Skill"},{"txt":"Hero Description"}]},{"txt":"Prince Xiaoqiang","menu":[{"txt":"Prince Skill"},{"txt":"Hero Description"}]}]}];
new Selects($('demo1'),data,["Race","Hero"]);
new Selects($('demo2'),data,["Race","Hero","Introduction"]);
new Selects($('demo3'),data,["Race","Hero","Introduction","Skill"]);
new Selects($('demo4'),data,["Race","Hero","Introduction","Skill","Skill Description"]);
}
</script>
</body>
</html>