<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <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> </pead> <body > <div >2 level linkage </div> <div id= ' demo1 ' ></div> <div >3-Level linkage </div> <div id= ' Demo2 ' ></div> <div >4-level linkage </div> <div id= ' Demo3 ' ></div > <div >5-level linkage </div> <div id= ' Demo4 ' ></div> <script language= ' JavaScript ' > var Sy s = (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 && Amp 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": "Terran", "menu": [{"TXT": "Great Wizard", "menu": [{"TXT": "Dafa Skills", "menu": [{ "TXT": "Water Element", "menu": [{"TXT": "},{" "txt": "Puncture Attack"},{"TXT": "Very good Things"}]},{"txt": "Blizzard," menu ": [{" TXT ":" Magic Attack "},{" TXT ":" Area Damage "},{" TXT ":" Very Beautiful "},{" TXT ":" Can be interrupted "}]},{" txt ":" Brilliant Aura "},{" TXT ":" Instantly move "}]},{" txt ":" Hero Description, "menu": [{"TXT": "Intellectual Hero"},{"TXT": "Strong aura"},{"TXT": "auxiliary"},]}]},{"TXT": "King of the Hills", "menu": [{] TXT ":" Hill Skills "," menu ": [{" TXT ":" The Hammer of the Storm "},{" txt ":" Cone "},{" txt ":" Cone halo "},{" TXT ":" The Gods Descend "}]},{" TXT ":" Hero description "," menu ": [{" TXT ":" Power hero "},{" txt: "Second kill ability"},{"TXT": "Very short"},{"" TXT ":" Big Technical Metamorphosis "}]}]},{" TXT ":" Paladin "," menu ": [{" TXT ":" Paladin Skills "," menu ": [{" TXT ":" Light "} , {"TXT": "Invincible"},{"TXT": "Aura"},{"" TXT ":" Resurrection "}]},{" TXT ":" Hero description "," menu ": [{" TXT ":" The Hero of Power "},{" TXT ":" Auxiliary Hero "},{" TXT ":" Personal Mammy "}]} ]},{"txt": "Blood Mage", "menu": [{"TXT": "The Blood Law Skill", "the menu": [{"TXT": "The Flame"},{"txt": "Sucks the Blue"},{"TXT": "The Nothingness"},{"the TXT": "The Bird Phoenix"}]},{"TXT": " Hero description "," menu ": [{" TXT ":" Intelligence Hero "},{" "TXT": "Auxiliary Hero"},{"txt": "Long very handsome"}]}]}]},{"txt": "Orc", "menu": [{"TXT": "" "" "" "," "menu": [{] txt ":" "the Base Holy Skill", "menu": [{"TXT": "The Wind Step"},{"" TXT ":" Shadow "},{" TXT ":" Fatal hit "},{" TXT ":" Blade Storm "}]},{" TXT ":" Hero description "," menu ": [{" TXT ":" Agile Hero "},{" TXT ":" High attack hero "},{" "txt": "Pillage"},{"txt": "Indecent assault"},{"TXT": "Very strong"}]}]},{"TXT": "Prophet Man", "menu": [{"TXT": "The Prophet Skill", " Menu ": [{" TXT ":" Wolf "}, {"TXT": "Day"},{"" TXT ":" Lightning Chain "},{" TXT ":" Earthquake "}]},{" TXT ":" Hero description "," menu ": [{" TXT ":" Intellectual Hero "},{" txt ":" Harassment Hero "}]}]},{" txt ":" Tauren Chief "," menu ": [{txt]:" Cow head Skills "," menu ": [{" TXT ":" "},{" "txt": "Position"},{"TXT": "Durable Aura"},{"txt": "Resurrection"}]},{"TXT": "Hero description", " Menu ': [{' txt ': ' Power Hero "},{" "TXT": "Magic Powerful"},{"TXT": "The Long Mighty"},{"TXT": "A meat shield"}]}]},{"TXT": "Small yy", "menu": [{"TXT": "Small y skills", " Menu ': [{' txt ': ' Change Animal "},{" txt: "Treatment wave"},{"txt": "Small snake Bonzi"},{"TXT": "All Invincible"}]},{"TXT": "Hero description", "menu": [{"TXT": "Agile Hero"},{"TXT" : "Magic Powerful"},{"TXT": "Auxiliary Hero"}]}]}]},{"" TXT ":" Undead "," menu ": [{" TXT ":" The Death knight "," menu ": [{" TXT ":" Dead Riding Skills "," menu ": [{txt:" Poo Tuo "},{ txt: "Evil aura"},{txt: "Death contract"},{txt: "Resurrection of the Undead"}]},{"TXT": "Hero description", "menu": [{txt: "Riding is the Sheep"},{txt: "Prematurely senile"},{txt: "Frost of Sorrow"},{txt: " Ah, and Seth "}]}]},{" TXT ":" Lich, "menu": [{"TXT": "Lich Skills", "menu": [{txt: "Ice"},{txt: "Bing"},{txt: "Contract"},{txt: "Death and Decay"}]},{"txt": " Hero description "," menu ": [{txt:] wear a skirt"},{txt: "All Is Bone"},{txt: "Not male not female"}]}]},{"txt": "Fear Lord", "menu": [{"TXT": "Devil Skill"},{"txt": "Hero Description"}]}, {"txt": "Xiao Qiang Prince", "menu": [{"TXT": "Prince Skills"},{"TXT": "Hero Description"}]}]; New Selects ($ (' demo1 '), data,["race", "hero"]); New Selects ($ (' Demo2 '), data,["speciesClan "," Hero "," Introduction "]); New selects (' Demo3 '), data,["race", "Hero", "Introduction", "skill"]); New Selects ($ (' Demo4 '), data,["race", "Hero", "Introduction", "Skill", "skill description"]); } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
