Le code est très simple. Ici, je vous recommande principalement les idées d'implémentation de ce code, qui sont uniques.
Fournir le code:
La copie de code est la suivante:
<! 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">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" />
<Title> Sélectionne </TITME>
<style type = "text / css">
* {taille de police: 14px;}
SELECT {hauteur: 20px; taille de police: 12px;}
</ style>
</ head>
<body>
<div style = 'Color: Red'> Lien de niveau à 2 niveaux </div>
<div id = 'Demo1'> </div> <br> <br> <br>
<div style = 'Color: Red'> Lien de niveau à 3 niveaux </div>
<div id = 'Demo2'> </div> <br> <br> <br>
<div style = 'Color: Red'> Linkage à 4 niveaux </div>
<div id = 'Demo3'> </div> <br> <br> <br>
<div style = 'Color: Red'> Lien de niveau à 5 niveaux </div>
<div id = 'Demo4'> </div> <br> <br> <br>
<script linguisse = "javascript">
var sys = (fonction (ua) {
var s = {};
s.ie = ua.match (/ msie ([/d.
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)
s.ie7 = (s.ie && ([/ msie (/d)/.0/i.exec(navigator.UserAgent)
s.ie8 = (s.ie && ([/ msie (/d)/.0/i.exec(navigator.UserAgent)
retour s;
}) (Navigator.UserAgent.TolowerCase ());
Sys.ie6 && document.execcommand ("backgroundImageCache", false, true);
fonction $ (id) {
return document.getElementById (id);
};
fonction $$ (p, e) {
retour p.getElementsByTagName (e);
};
fonction addListener (élément, e, fn) {
element.addeventListener? element.addeventListener (e, fn, false): element.attachevent ("on" + e, fn);
};
Fonction RemoveListener (élément, e, fn) {
element.reMoveEventListener? Element.RemoveEventListener (E, FN, false): element.detachevent ("on" + e, fn);
};
var bind = fonction (objet, fun) {
var args = array.prototype.slice.call (arguments) .slice (2);
return function () {
return fun.apply (objet, args);
};
};
var bindaseventListener = fonction (objet, fun) {
var args = array.prototype.slice.call (arguments) .slice (2);
return function (event) {
return fun.apply (objet, [événement || window.event] .Concat (args));
};
};
var extend = fonction (destination, source) {
pour (propriété var dans la source) {
destination [propriété] = source [propriété];
};
};
var class = function (propriétés) {
var _class = function () {return (arguments [0]! == null && this.inialize && typeof (this.inialize) == 'function')? this.Initialize.Apply (this, arguments): this;};
_class.prototype = propriétés;
return _class;
};
// =====================================================================. =======================================================================.
var selets = new class ({
Initialize: fonction (conteneur, données, titre) {
this.Container = conteneur;
this.num = title.length;
this.events = nouveau tableau (title.length-1);
var i, l, select;
pour (i = 0; i <this.num; i ++)
{
contener.innerhtml = contener.innerhtml + "" + title [i];
contener.ApendChild (document.CreateElement ('select'));
}
select = $$ (conteneur, 'select') [0];
pour (i = 0, l = data.length; i <l; i ++)
select.options.add (nouvelle option (data [i] .txt, i));
AddListener (SELECT, 'Change', Bind (this, this.change, sélectionnez, données, 0));
this.change (sélection, données, 0);
},
Changement: fonction (obj, données, num) {
if (num == this.num-1) return;
var menu = data [obj.value] .Menu;
select = $$ (this.Container, 'select') [num + 1];
select.length = 0;
if (! menu) retourner;
if (this.events [num]! = Undefined) reroveListener (select, 'change', this.events [num])
this.events [num] = bind (this, this.change, select, menu, num + 1)
AddListener (SELECT, 'Change', this.events [num]);
pour (var i = 0, l = menu.length; i <l; i ++)
select.options.add (nouvelle option (menu [i] .txt, i));
this.change (sélectionnez, menu, num + 1);
}
});
// =====================================================================. =======================================================================.
window.onload = function () {
var data = [{"txt": "race humaine", "menu": [{"txt": "Magic Master", "Menu": [{"txt": "Magic Skill", "Menu": [{"txt": "Water Element", "Menu": [{"txt": "Summoning"}, {"txt": "Puncture Attack Things "}]}, {" txt ":" Snowstorm "," menu ": [{" txt ":" Magic Attack "}, {" txt ":" dommage de la zone "}, {" txt ":" très beau "}, {" txt ":" peut être interrompu "}]}, {" txt ":" Halo Glorieux "}," TXT " Moment}]}, {"txt": "Hero Description", "Menu": [{"txt": "Intellect Hero"}, {"txt": "Strong Halo"}, {"txt": "Auxiliary"},]}]}, {"txt": "King of the Hill", "Menu": [{"txt": "txt": Compétence "," menu ": [{" txt ":" Storm Hammer "}, {" tx t ":" Cone Ground "}, {" txt ":" cone diaphragm "}, {" txt ":" Hero Description "," menu ": [{" txt ":" Force Hero "}, {" txt ":" Flash Kill " Capacité "}, {" 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 ":" héros " Description "," menu ": [{" txt ":" Herme Hero "}, {" txt ":" Hero assisté "}, {" txt ":" Hunt personnel "}]}]}, {" txt ":" Blood Mage "," menu ": [{" txt ":" Blood Mage " Compétences "," menu ": [{" txt ":" flamme "}, {" txt ":" blue-absorbing "}, {" txt ":" nonsité "}, {" txt ":" Divine Bird Phoenix "}]}, {" txt ":" Hero Description "," Menu ": [{" txt ":" Intellect " Hero "}, {" txt ":" Hero assisté "}, {" txt ":" tel beau "}]}]}]}]}, {" txt ":" Beast Clan "," Menu ": [{" txt ":" Menu silent "," menu ": [{" txt ":" The Saint-Skill "," Menu ": [{" Txt ":" Txt ":" The 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 voler "}, {" txt ":" indécent et invincible "}, {" txt ":" très puissant "}]}]}]}, {" txt ":" prophète man "," menu ": [{" txt ":" prophète Skill "," Menu ": [{" txt ":" Wolf "}, {" txt ":" Day "}, {" txt ":" Lightning Chain "}, {" txt ":" Tre dans le tremblement Hero "}]}]}]}, {" txt ":" tatou chef "," menu ": [{" txt ":" Shockwave "}, {" txt ":" position "}, {" txt ":" durabilité halo "}, {" txt ":" Resurrection "}]}, {" txt ":" Hero " Description "," Menu ": [{" txt ":" Herme Hero "}, {" txt ":" Magic Power "}, {" txt ":" Long puissant "}, {" txt ":" A Meat Shield "}]}]}]}, {" txt ":" Small Yy "," Menu ": [{{" txt ":" Small Y Skill "," Menu ": [{" txt ":" Changer Animal "}, {" txt ":" Health Wave "}, {" txt ":" Little Snake Stick "}, {" txt ":" Tout invincible "}]}, {" txt ":" Hero Description "," Menu ": [{" txt ":" Hero " Power"},{"txt":"Assisted Hero"}]}]}]}]}]},{"txt":"Undead","menu":[{"txt":"Death Knight","menu":[{"txt":"Dead Rider Skill","menu":[{txt:"Stool Tumblr"} ,{txt:"Evil Halo "}, {txt:" Contrat de mort "}, {txt:" Resurrection of the Dead "}]}, {" txt ":" Hero Description "," menu ": [{txt:" Riding a mouton "}, {txt:" avant l'âge "}, {txt:" Frost Sorrow "}, {txt:" Ah "Ah Seth "}]}]}]}, {" txt ":" lich "," menu ": [{" txt ":" Lich Skill "," Menu ": [{txt:" raging ice "}, {txt:" ice armor "}, {txt:" contrat "}, {txt:" Death and Withering "}]}}, {" txt ":" Hero Description "," menu ": [{txt:" portant une jupe "}, {txt:" tous les os "}, {txt:" No Man or Woman "}]}]}]}, {" txt ":" Fear Demon King "," Menu ": [{" Txt ":" Demon King Skill "}, {" Txt ":" Héris " Description "}]}, {" txt ":" prince xiaoqiang "," menu ": [{" txt ":" Prince Skill "}, {" txt ":" Hero Description "}]}]}];
news selets ($ ('Demo1'), data, ["race", "héros"]);
news selets ($ ('Demo2'), data, ["race", "héros", "introduction"]);
Nouveaux Selets ($ ('Demo3'), Data, ["Race", "Hero", "Introduction", "Skill"]);
Nouveaux Selets ($ ('Demo4'), Data, ["Race", "Hero", "Introduction", "Skill", "Skill Description"]);
}
</cript>
</docy>
</html>