El código es muy simple. Aquí le recomiendo principalmente las ideas de implementación de este código, que son únicas.
Proporcionar el código:
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> selecciona </title>
<style type = "text/css">
*{font-size: 14px;}
Seleccionar {altura: 20px; font-size: 12px;}
</style>
</ablo>
<Body>
<div style = 'color: rojo'> 2 niveles de nivel </div>
<div id = 'demo1'> </div> <br> <br> <br>
<div style = 'color: rojo'> enlace de 3 niveles </div>
<div id = 'demo2'> </div> <br> <br> <br>
<div style = 'color: rojo'> 4 niveles de nivel </div>
<div id = 'demo3'> </div> <br> <br> <br>
<div style = 'color: rojo'> enlace de 5 niveles </div>
<div id = 'demo4'> </div> <br> <br> <br>
<script language = "javaScript">
var sys = (function (ua) {
var s = {};
s.ie = ua.match (/msie ([/d.font>+)/)?true:false;
s.firefox = ua.match (/firefox // ([/d.]+)/)? Verdadero: falso;
s.chrome = ua.match (/chrome // ([/d.]+)/)? Verdadero: falso;
s.ie6 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent)font>iante affencor.
s.ie7 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent)font>igarfontNozo == 7))? Verdadero: falso;
s.ie8 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent)font>iante affigoar.
regreso s;
}) (navigator.useragent.tolowercase ());
Sys.ie6 && document.execCommand ("BackgroundImageCache", falso, true);
función $ (id) {
return document.getElementById (id);
};
función $$ (p, e) {
return P.getElementsBytagName (e);
};
function addListener (elemento, e, fn) {
element.adDeventListener? Element.adDeventListener (e, fn, falso): element.attachevent ("on" + e, fn);
};
función removeListener (element, e, fn) {
element.removeEventListener? Element.RemoveEventListener (e, fn, falso): element.detachevent ("on" + e, fn);
};
var bind = function (objeto, diversión) {
var args = array.prototype.slice.call (argumentos) .slice (2);
Función de retorno () {
return fun.apply (objeto, args);
};
};
var bindaseVentListener = function (objeto, diversión) {
var args = array.prototype.slice.call (argumentos) .slice (2);
función de retorno (evento) {
return fun.apply (objeto, [evento || window.event] .concat (args));
};
};
var extend = function (destino, fuente) {
para (propiedad var en la fuente) {
destino [propiedad] = fuente [propiedad];
};
};
var class = function (propiedades) {
var _class = function () {return (argumentos [0]! == null && this.initialize && typeof (this.initialize) == 'function')? this.initialize.apply (this, argumentos): this;};
_class.prototype = propiedades;
return _class;
};
// ============================================================== =================================================================
var selecciona = nueva clase ({
Inicializar: función (contenedor, datos, título) {
this.container = contenedor;
this.num = title.length;
this.events = new Array (title.length-1);
var i, l, seleccionar;
para (i = 0; i <this.num; i ++)
{
Container.innerhtml = Container.innerhtml + "" + Title [i];
Container.appendChild (document.createElement ('select'));
}
select = $$ (Container, 'Select') [0];
para (i = 0, l = data.length; i <l; i ++)
select.options.add (nueva opción (datos [i] .txt, i));
addListener (seleccione, 'Cambiar', Bind (this, this.change, Select, Data, 0));
this.change (seleccionar, datos, 0);
},
Cambiar: función (obj, data, num) {
if (num == this.num-1) return;
var menú = data [obj.value] .menu;
select = $$ (this.container, 'select') [num+1];
select.length = 0;
if (! menú) regresar;
if (this.events [num]! = Undefined) RemoVeListener (seleccione 'Cambiar', this.events [num])
this.events [num] = bind (this, this.change, select, menú, num+1)
addListener (seleccione, 'Cambiar', this.events [num]);
para (var i = 0, l = menu.length; i <l; i ++)
select.options.add (nueva opción (menú [i] .txt, i));
this.change (seleccionar, menú, num+1);
}
});
// ============================================================== =================================================================
window.onload = function () {
var data = [{"txt": "raza humana", "menú": [{"txt": "mágico maestro", "menú": [{"txt": "habilidad mágica", "menú": [{"txt": "elemento de agua", "menú": [{"txt": "cummoning"}, {"txt:" Pungure ataus Things"}]},{"txt":"Snowstorm","menu":[{"txt":"Magic Attack"},{"txt":"Area Damage"},{"txt":"Very Beautiful"},{"txt":"Can be interrupted"}]},{"txt":"Glorious Halo"},{"txt":"Move in a Momento}]}, {"" txt ":" descripción de héroe "," menú ": [{" txt ":" héroe de intelect "}, {" txt ":" halo fuerte "}, {" txt ":" auxiliar "},]}]}, {" txt ":" rey de la colina "," menú ": [{" ":" txt ":": "HATA Habilidad "," menú ": [{" txt ":" Storm Hammer "}, {" tx t ":" cóngrota "}, {" txt ":" cone diaphragm "}, {" txt ":" heroe descripción "," menú ": [{" txt ":" héroe de fuerza "}, {" txt ":" flash kill " habilidad "}, {" txt ":" corto "}, {" txt ":" gran habilidad pervertir "}]}]}]}, {" tt "t": "gran habilidad pervertir"}]}]}]}, {"tt" t ":" corto "}]}]}, {" t "t" "" "" "" "" "" "" "" "" "" "" " xt ":" paladin "," menú ": [{" txt ":" habilidad de paladín "," menú ": [{" txt ":" light "}, {" txt ":" invencible "}, {" txt ":" hara "}, {" txt ":" resurrection "}]}, {" txt ":" hero "hero Descripción "," menú ": [{" txt ":" héroe de fuerza "}, {" txt ":" héroe asistido "}, {" txt ":" cazar personal "}]}]}, {" txt ":" mago de sangre "," menú ": [{" txt ":" mage de sangre. Habilidad "," menú ": [{" txt ":" flame "}, {" txt ":" azul absorbing "}, {" txt: "nonsity"}, {"txt": "divine bird phoenix"}]}, {"txt": "héroe descripción", "menú": [{"" txt ":" intelectection "}]}]}," txt ":" Descripción del héroe "," menú ": [{" "Txt": "Intellectection": "Intellectection": "Intellectection": "Intellectectectect. héroe "}, {" txt ":" héroe asistido "}, {" txt ":" tan guapo "}]}]}]}]}, {" txt ":" clan bestia "," menú ": [{" txt ":" santo silencioso "," menú ": [{" txt ":" la habilidad de la santa "," menú ": [{{" Txt ":" Txt ":": "Txt:" Txt: ":" Paso "}, {" txt ":" clones de sombra "}, {" txt ":" strike crítico "}, {" txt ":" tormenta de blade "}]}, {" txt ":" hero de descripción "," menú ": [{" txt ":" héroe ágil "}, {" txt ":" hero atacante "}, {" txt ":" matar y "matar" robando "}, {" txt ":" indecente e invencible "}, {" txt ":" muy poderoso "}]}]}]}, {" txt ":" hombre profeta "," menú ": [{" txt ":" profeta habilidad "," menú ": [{" "txt": "lolf"}, {"txt": "día"}, {"txt": "cadena de rayos"}, {"txt": "terremoto"}]}, {"" txt ":" descripción de héroes "," menú ": [{" txt ":" intelect hero "}, {" t "tsx:" harst " héroe "}]}]}]}, {" txt ":" tatou chefe "," menú ": [{" txt ":" shockwave "}, {" txt ":" posición "}, {" txt ":" halo de durabilidad "}, {" txt ":" resurrección "}, {" txt ":" héroe hero Descripción "," Menú ": [{" Txt ":" Fuerza Hero "}, {" Txt ":" Magic Power "}, {" Txt ":" Long Potente "}, {" Txt ":" Un escudo de carne "}]}]}]}, {" txt ":" pequeño yy "," menú ": [{" txt ":" pequeño y y "pequeño y y" y pequeño y y "y pequeño y" y "y" y "y" y "y" y "y" y "y" y "y" y "y" y "," y "y", "y" y "," y "," y "y", "y", "y", "y", "y", ",", ",", ",", ",", ",", ","? Habilidad "," menú ": [{" txt ":" cambiar animal "}, {" txt ":" salud de salud "}, {" txt ":" pequeño snake stick "}, {" txt ":" todo invencible "}]}, {" txt ":" descripción de heroín Power"},{"txt":"Assisted Hero"}]}]}]}]}]},{"txt":"Undead","menu":[{"txt":"Death Knight","menu":[{"txt":"Dead Rider Skill","menu":[{txt:"Stool Tumblr"} ,{txt:"Evil Halo "}, {txt:" contrato de muerte "}, {txt:" resurrección de los muertos "}]}, {" txt ":" descripción de héroe "," menú ": [{txt:" montar una oveja "}, {txt:" antes de la vejez "}, {txt:" frost sorrow "}, {txt:" ah: "Ah. Seth"}]}]}]},{"txt":" Lich","menu":[{"txt":"Lich skill","menu":[{txt:"Raging ice"},{txt:"Ice armor"},{txt:"Contract"},{txt:"Death and Withering"}]},{"txt":"Hero Descripción "," menú ": [{txt:" usando una falda "}, {txt:" Todos los huesos "}, {txt:" no hombre o mujer "}]}]}]}, {" txt ":" teme demon king "," menú ": [{" txt ":" demon king skill "}, {" txt ":" hero Descripción "}]}, {" txt ":" Prince xiaoqiang "," menú ": [{" txt ":" Prince Skill "}, {" txt ":" hero de descripción "}]}]}];
new Selects ($ ('Demo1'), datos, ["raza", "héroe"]);
New Selects ($ ('Demo2'), Data, ["Raza", "Héroe", "Introducción"]);
New Selects ($ ('Demo3'), Data, ["Raza", "Héroe", "Introducción", "Habilidad"]);
New Selects ($ ('Demo4'), datos, ["raza", "héroe", "introducción", "habilidad", "descripción de habilidad"]);
}
</script>
</body>
</html>