Der Code ist sehr einfach. Hier empfehle ich Ihnen hauptsächlich die Implementierungsideen dieses Code, die einzigartig sind.
Geben Sie den Code an:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = gb2312" />
<titels> Wählt </title>
<style type = "text/css">
*{Schriftgröße: 14px;}
Wählen Sie {Höhe: 20px; Schriftgröße: 12px;}
</style>
</head>
<body>
<div style = 'color: rot'> 2-Level-Verknüpfung </div>
<div id = 'Demo1'> </div> <br> <br> <br>
<div style = 'color: rot'> 3-Level-Verknüpfung </div>
<div id = 'Demo2'> </div> <br> <br> <br>
<div style = 'color: rot'> 4-Level-Verknüpfung </div>
<div id = 'Demo3'> </div> <br> <br> <br>
<div style = 'color: rot'> 5-Level-Verknüpfung </div>
<div id = 'Demo4'> </div> <br> <br> <br>
<script Language = "JavaScript">
var sys = (function (ua) {
var s = {};
s.ie = ua.match (/msie ([/d. weibliche+)/)?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 0], 1= 6))? Richtig: Falsch;
s.IE7 = (s.IE && ([/msie (/d)/.0/i.exec(navigator.useragent)] 0 0] == 7))? Richtig: Falsch;
s.IE8 = (s.IE && ([/msie (/d)/.0/i.exec(navigator.useragent)] 0 0] == 8))? Richtig: Falsch;
Rückkehr s;
}) (navigator.useragent.tolowerCase ());
Sys.ie6 && document.execcommand ("backgroundImageCache", false, true);
Funktion $ (id) {
return document.getElementById (id);
};
Funktion $$ (p, e) {
return p.getElementsByTagName (e);
};
Funktion addierener (Element, e, fn) {
element.addeventListener? element.adDeVentListener (e, fn, false): Element.attachEvent ("on" + e, fn);
};
Funktion removelistener (Element, e, fn) {
Element.RemoveEventListener? Element.RemoveEventListener (e, fn, false): Element.DetAchEvent ("on" + e, fn);
};
var bind = Funktion (Objekt, Spaß) {
var args = array.prototype.slice.call (Argumente) .lice (2);
return function () {
return Fun.Apply (Objekt, Args);
};
};
var bindaseventListener = Funktion (Objekt, Spaß) {
var args = array.prototype.slice.call (Argumente) .lice (2);
Rückgabefunktion (Ereignis) {
return Fun.Apply (Objekt, [Ereignis || window.event] .concat (args));
};
};
var extend = function (Ziel, Quelle) {
für (var Eigenschaft in Quelle) {
Ziel [Eigenschaft] = Quelle [Eigenschaft];
};
};
var class = function (Eigenschaften) {
var _class = function () {return (Argumente [0]! this.initialize.apply (this, Argumente): Dies;};
_class.Prototype = Eigenschaften;
Rückgabe _class;
};
// =============================================================== ===================================================================
var wählt = neue Klasse ({{{{
initialisieren: Funktion (Container, Daten, Titel) {
this.container = Container;
this.num = title.length;
this.events = new Array (title.Length-1);
var i, l, select;
für (i = 0; i <this.num; i ++)
{
Container.InnerHtml = Container.innerHtml + "" + Titel [i];
Container.AppendChild (document.Createelement ('select'));
}
select = $$ (Container, 'Select') [0];
für (i = 0, l = data.length; i <l; i ++)
select.options.add (neue Option (Daten [i] .txt, i));
addierenerer (auswählen, ändere ', binden (this.thange, select, data, 0));
this.change (select, data, 0);
},
Änderung: Funktion (OBJ, Daten, num) {
if (num == this.num-1) return;
varmenü = Daten [obj.value] .menu;
select = $$ (this.container, 'select') [num+1];
select.length = 0;
if (! Menü) zurückkehren;
if (this.events [num]!
this.events [num] = bind (this.thange, Wählen Sie, Menü, Num+1)
addierener (select, ändere ', this.events [num]);
für (var i = 0, l = Menü.Length; i <l; i ++)
select.options.add (neue Option (Menü [i] .txt, i));
this.change (auswählen, Menü, 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 Fähigkeit "}, {" txt ":" Short "}, {" txt ":" Große Fähigkeiten Pervert "}]}]}]}, {" tt "t": "Große Fähigkeiten Pervert"}]}]}]}, {"t" t "t": ":" Kurz "}]}, {" t "t" t "t" t "t" t "t" t "t" t ":": "}]}, {" t "t" t "t" t "t" t "t" t "t": XT ":" Paladin "," Menü ": [{" txt ":" Paladin Skill "," Menü ": [{" txt ":" light "}, {" txt ":" Invincible "}, {" txt ":" hara "}, {" txt ":": ":": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held": "Held" Beschreibung "," Menü ": [{" txt ":" Stärke Hero "}, {" Txt ":" Assisted Hero "}, {" txt ":" Personal Hunt "}]}]}, {" Txt ":" Blood Mage "," Menü ": [{" Txt ":" Blood Mage ":" Blood Mage " Fähigkeit "," Menü ": [{" txt ":" flame "}, {" txt ":" blau-absorbing "}, {" txt ":" nonsity "}, {" txt ":" Divine Bird Phoenix "}, {" Txt ":" Heldenbeschreibung "," Menü ":": ":": ":": ":": ":": ":": ":": ":": ":": ":": ":": ":": ":": ":": ":" ":": ":": ":": ":": ":": ":": ":": ":": ":": ":": ":": ":" ms ": [{{{{txt": [{{{{txt ": [{{{{txt": [{{{{txt 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 Raub "}, {" txt ":" unanständig und unbesiegbar "}, {" txt ":" Sehr mächtig "}]}]}]}, {" txt ":" Prophet Man "," Menü ": [{" 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 Fertigkeit "," Menü ": [{" txt ":" Animal "}, {" txt ":" Health Wave "}, {" txt ":" Little Snake Stick "}, {" txt ":" Alles Invincibl. 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 Beschreibung "}]}, {" txt ":" Prince Xiaoqiang "," Menü ": [{" txt ":" Prince Skill "}, {" txt ":" Hero Beschreibung "}]}]}];
Neue Auswahl ($ ('Demo1'), Daten, ["Rasse", "Held"]);
Neue Auswahl ($ ('Demo2'), Daten, ["Rasse", "Held", "Einführung"]);
Neue Auswahl ($ ('Demo3'), Daten, ["Rasse", "Held", "Einführung", "Fähigkeiten"]);
New Selects ($ ('Demo4'), Daten, ["Rasse", "Held", "Einführung", "Fähigkeiten", "Fähigkeiten Beschreibung"]);
}
</script>
</body>
</html>