O código é muito simples. Aqui, recomendo principalmente as idéias de implementação deste código, que são únicas.
Forneça o código:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> seleciona </title>
<style type = "text/css">
*{font-size: 14px;}
Selecione {Hight: 20px; font-size: 12px;}
</style>
</head>
<Body>
<div style = 'cor: vermelho'> link de 2 níveis </div>
<div id = 'Demo1'> </div> <br> <br> <br>
<div style = 'cor: vermelho'> link de 3 níveis </div>
<div id = 'Demo2'> </div> <br> <br> <br>
<div style = 'cor: vermelho'> link de 4 níveis </div>
<div id = 'Demo3'> </div> <br> <br> <br>
<div estilo = 'cor: vermelho'> vínculo de 5 níveis </div>
<div id = 'Demo4'> </div> <br> <br> <br>
<Script Language = "JavaScript">
var sys = (função (ua) {
var s = {};
s.ie = ua.match (/msie ([/d. ]+)/)??tue: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-body1] == 6))? true: false;
s.ie7 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.userAgent) ]..0-body1] == 7))? true: false;
s.ie8 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.UserAgent) ]..0 ].1] == 8))? true: false;
retorno s;
}) (Navigator.UserAgent.TolowerCase ());
Sys.ie6 && document.execCommand ("BackgroundImageCache", false, true);
função $ (id) {
retornar document.getElementById (id);
};
função $$ (p, e) {
retorno p.getElementsByTagName (e);
};
função addListener (elemento, e, fn) {
element.AddeventListener? Element.AddeventListener (e, fn, false): element.attachevent ("on" + e, fn);
};
função removelistener (elemento, e, fn) {
Element.RemoveEventListener? Element.RemoveEventListener (E, Fn, False): Element.Detachevent ("On" + E, Fn);
};
var bind = function (objeto, diversão) {
var args = array.prototype.slice.call (argumentos) .slice (2);
Return function () {
retornar divertido.Apply (objeto, args);
};
};
var bindaseventListener = function (objeto, diversão) {
var args = array.prototype.slice.call (argumentos) .slice (2);
Função de retorno (evento) {
return Fun.Apply (Object, [Event || Window.Event] .Concat (args));
};
};
var estend = function (destino, fonte) {
para (propriedade var na fonte) {
destino [propriedade] = fonte [propriedade];
};
};
var class = function (propriedades) {
var _class = function () {return (argumentos [0]! == null && this.initialize && typeof (this.initialize) == 'function')? this.initialize.apply (this, argumentos): this;};
_class.prototype = Propriedades;
retornar _class;
};
// ============================================================= ================================================================
var selecions = nova classe ({
Inicializar: função (contêiner, dados, título) {
this.Container = contêiner;
this.num = title.length;
this.events = new Array (title.length-1);
var i, l, selecione;
para (i = 0; i <this.num; i ++)
{
container.innerhtml = container.innerhtml + "" + title [i];
container.appendChild (document.createElement ('select'));
}
selecione = $$ (contêiner, 'selecione') [0];
for (i = 0, l = data.length; i <l; i ++)
select.options.add (nova opção (dados [i] .txt, i));
addListener (selecione, 'altere', bind (this, this.Change, select, dados, 0));
this.Change (selecione, dados, 0);
},
Alterar: função (obj, dados, num) {
if (num == this.num-1) retornar;
var menu = dados [obj.value] .menu;
selecione = $$ (this.container, 'select') [num+1];
select.Length = 0;
if (! menu) retornar;
if (this.events [num]! = indefinido) removeListener (selecione, 'altere', this.events [num])
this.events [num] = bind (this, this.Change, selecione, menu, num+1)
addListener (selecione, 'altere', this.events [num]);
for (var i = 0, l = menu.length; i <l; i ++)
select.options.add (nova opção (menu [i] .txt, i));
this.Change (selecione, 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": "Intelect Hero"}, {"txt": "halo forte"}, {"txt": "Auxiliar"},]}}, {"txt": "King of the Hill" "": "},]}}, {" txt ":" King of the Hill "" ": Habilidade "," Menu ": [{" txt ":" Storm Hammer "}, {" tx t ":" Cone Ground "}, {" txt ":" Cone diafragma "}, {" txt ":" Hero Description "," menu ": [{" txt ":" Força Hero "}, {{{{{" Txt ":" TXT ":" Hero ": {" TXT ":" TXT ":" TXT ": habilidade "}, {" txt ":" curto "}, {" txt ":" grande habilidade pervertida "}]}]}]}, {" tt "t": "grande habilidade pervertida"}]}]}]]}, {"tt" t "tt": "curto"}]}]}]] xt ":" paladin "," menu ": [{" txt ":" Habilidade Paladin "," Menu ": [{" txt ":" Light "}, {" txt ":" Invincible "}, {" txt ":" hara "}, {" txt ":" ressurreição "}] Descrição "," Menu ": [{" txt ":" Forcent Hero "}, {" txt ":" Assisted Hero "}, {" txt ":" Hunt pessoal "}]}]}, {" txt ":" mago de sangue "," menu ": [" txt ":" Blood Mage ": Habilidade "," Menu ": [{" txt ":" Flame "}, {" txt ":" Blue-absorbing "}, {" txt ":" bobagem "}, {" txt ":" Divine Bird Phoenix "}]}, {" TXT ":" Hero description "," Menu ":": "TXT": "Hero": herói "}, {" txt ":" assistido herói "}, {" txt ":" tais bendis "}]}]}]}]}, {" txt ":" beast clan "," menu ": [{" txt ":" silent saint "," menu ": [{" txt ": [{" txt ":" silent saint "," 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 ":" indecente e invencível "}, {" txt ":" muito poderoso "}]}]}]}, {" txt ":" profeta man "," menu ": [{" txt ":" profeta Habilidade "," Menu: [{"txt": "Wolf"}, {"txt": "dia"}, {"txt": "Lightning Chain"}, {"txt": "terremoto" {"txt": {"txt": "Hero description", "{" txt ":" TXT ": {" TXT ":" HERO "," Menu ": [{" txt ":" 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:" Ressurreição dos mortos "}]}, {" txt ":" Hero Descrição "," Menu ": [{txt:" Apertando um sheep "}, {txt:" Antes da idade da idade "}, {txt:" Frosw Seth "}]}]}]}, {" txt ":" lich "," menu ": [{" txt ":" lich skill "," menu ": [{txt:" raging gelo "}, {txt:" ice Armor "},}}}} {{txt:" txt: "Ice"},}}}}} {"txt:" morto "e" txt "e" txt: "txt:" Ice Armor "},}}}} {" txt "e" txt: "txt:" Ice "},}}}}}" {txt "e" txt: "txt:" Ice Armor "},}}}} {" txt: " 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 Descrição "}]}, {" txt ":" príncipe xiaoqiang "," menu ": [{" txt ":" príncipe habilidade "}, {" txt ":" hero description "}]}]}]];
New Selects ($ ('Demo1'), Data, ["Race", "Hero"]);
New Selects ($ ('Demo2'), Data, ["Race", "Hero", "Introdução"]);
New Selects ($ ('Demo3'), Data, ["Race", "Hero", "Introdução", "Skill"]);
New Selects ($ ('Demo4'), Data, ["Race", "Hero", "Introdução", "Habilidade", "Descrição da Habilidade"]);
}
</script>
</body>
</html>