Javascript implements infinite select linkage menu_javascript skills

The code is very simple. Here I mainly recommend the implementation ideas of this code, which is unique.

Provide the code:

Copy code The code is as follows: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> Selects *{font-size:14px;} select{height:20px;font-size:12px;} 2级联动

3级联动

4级联动

5级联动

//================================================ ================================================== =========================== window.onload = function(){ var data=[{"txt":"Human Race","menu":[{"txt":"Arch Mage","menu":[{"txt":"Dafa Skills","menu":[{" txt":"Water Element","menu":[{"txt":"Summon"},{"txt":"Piercing Attack"},{"txt":"Very good thing"}]},{ "txt":"Blizzard","menu":[{"txt":"Magic Attack"},{"txt":"Area Damage"},{"txt":"Very Beautiful"},{"txt" :"Can be interrupted"}]},{"txt":"Brilliant Halo"},{"txt":"Teleport"}]},{"txt":"Hero Description","menu":[ {"txt":"Intelligence Hero"},{"txt":"Powerful Aura"},{"txt":"Auxiliary"},]}]},{"txt":"King of the Hill", "menu":[{"txt":"Hill Skill","menu":[{"txt":"Storm Hammer"},{"txt":"Cone"},{"txt":" Cone Halo"},{"txt":"God descends to earth"}]},{"txt":"Hero Description","menu":[{"txt":"Power Hero"},{"txt":" Instant kill ability"},{"txt":"Very short"},{"txt":"Great skill"}]}]},{"txt":"Paladin","menu":[{" txt":"Paladin Skills","menu":[{"txt":"Light"},{"txt":"Invincible"},{"txt":"Halo"},{"txt":" Resurrection"}]},{"txt":"Hero Description","menu":[{"txt":"Power Hero"},{"txt":"Auxiliary Hero"},{"txt":"Personal Name Nanny"}]}]},{"txt":"Blood Mage","menu":[{"txt":"Blood Mage Skills","menu":[{"txt":"Flame"},{ "txt":"Suck Blue"},{"txt":"Nothingness"},{"txt":"Magic Bird Phoenix"}]},{"txt":"Hero Description","menu":[{ "txt":"Intelligence Hero"},{"txt":"Auxiliary Hero"},{"txt":"Very handsome"}]}]}]},{"txt":"Orc", "menu":[{"txt":"Bad Saint","menu":[{"txt":"Bad Saint Skills","menu":[{"txt":"Wind Step"},{"txt ":"Shadow Clone"},{"txt":"Critical Strike"},{"txt":"Blade Storm"}]},{"txt":"Hero Description","menu":[{ "txt":"Agile hero"},{"txt":"High attack hero"},{"txt":"Killing and stealing goods"},{"txt":"Obscene and invincible"},{"txt":"Very Powerful"}]}]},{"txt":"Prophet Man","menu":[{"txt":"Prophet Skills","menu":[{"txt":"Wolf"},{" txt":"日"},{"txt":"Lightning Chain"},{"txt":"Earthquake"}]},{"txt":"Hero Description","menu":[{"txt" :"Intelligence Hero"},{"txt":"Harassment Hero"}]}]},{"txt":"Tauren Chief","menu":[{"txt":"Tauren Skills","menu ":[{"txt":"Shock Wave"},{"txt":"Position"},{"txt":"Durable Halo"},{"txt":"Resurrection"}]},{"txt" :"Hero Description","menu":[{"txt":"Power Hero"},{"txt":"Powerful Magic"},{"txt":"Long and Mighty"},{"txt" :"A human shield"}]}]},{"txt":"Little YY","menu":[{"txt":"Little Y Skill","menu":[{"txt":"Change Animal"},{"txt":"Healing Wave"},{"txt":"Small Snake Stick"},{"txt":"All Invincible"}]},{"txt":"Hero Description", "menu":[{"txt":"Agility Hero"},{"txt":"Powerful Magic"},{"txt":"Auxiliary Hero"}]}]}]},{"txt":" Undead","menu":[{"txt":"Death Knight","menu":[{"txt":"Death Knight Skills","menu":[{txt:"Shit Tutu"}, {txt:"Evil Aura"},{txt:"Death Contract"},{txt:"Resurrection of the Undead"}]},{"txt":"Hero Description","menu":[{txt:"Riding It's a sheep"},{txt:"Premature Aging"},{txt:"Frostmourne"},{txt:"Ah Seth"}]}]},{"txt":"Lich" ,"menu":[{"txt":"Lich Skills","menu":[{txt:"Ice"},{txt:"Ice Armor"},{txt:"Contract"},{txt :"Death and Decay"}]},{"txt":"Hero Description","menu":[{txt:"Wearing a skirt"},{txt:"All bones"},{txt:"Not a man, not a man Female"}]}]},{"txt":"Dread Lord","menu":[{"txt":"Demon Skills"},{"txt":"Hero Description"}]},{"txt ":"Prince Xiaoqiang","menu":[{"txt":"Prince Skills"},{"txt":"Hero Description"}]}]}]; new Selects($('demo1'),data,["race","hero"]); new Selects($('demo2'),data,["race","hero","introduction"]); new Selects($('demo3'),data,["race","hero","introduction","skills"]); new Selects($('demo4'),data,["race","hero","introduction","skill","skill description"]); }

Javascript implements infinite select linkage menu_javascript skills

Related articles