الكود بسيط للغاية. هنا أوصي بشكل أساسي بأفكار تنفيذ هذا الرمز لك ، وهي فريدة من نوعها.
توفير الرمز:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = gb2312" />
<title> يختار </title>
<type type = "text/css">
*{font-size: 14px ؛}
حدد {الارتفاع: 20px ؛ حجم الخط: 12px ؛}
</style>
</head>
<body>
<div style = 'color: red'> رابط مستويين </div>
<div id = 'demo1'> </viv> <br> <br> <br>
<div style = 'color: red'> linkage 3-level </iv>
<div id = 'demo2'> </viv> <br> <br> <br>
<div style = 'color: red'> 4-level linkage </iv>
<div id = 'demo3'> </viv> <br> <br> <br>
<div style = 'color: red'> 5-level linkage </iv>
<div id = 'demo4'> </viv> <br> <br> <br>
<script language = "javaScript">
var sys = (function (ua) {
var s = {} ؛
s.ie = ua.match (/msie ([/d./2010)/)؟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).
S.IE7 = (S.IE && ([/msie (/d)/.0/i.exec(navigator.useragent).
S.IE8 = (S.IE && ([/msie (/d)/.0/i.exec(navigator.useragent).
العودة s ؛
}) (navigator.useragent.toLowerCase ()) ؛
sys.ie6 && document.execcommand ("backgroundImageCache" ، false ، true) ؛
وظيفة $ (id) {
return document.getElementById (id) ؛
} ؛
وظيفة $$ (p ، e) {
return p.getElementsByTagname (e) ؛
} ؛
وظيفة AddListener (Element ، E ، Fn) {
element.addeventListener؟ element.addeventListener (e ، fn ، false): element.attachevent ("on" + e ، fn) ؛
} ؛
إزالة الوظائف (Element ، E ، Fn) {
element.RemoveEventListener؟ element.RemoveEventListener (E ، FN ، false): element.detachevent ("on" + e ، fn) ؛
} ؛
var bind = function (كائن ، متعة) {
var args = array.prototype.slice.call (وسيطات) .slice (2) ؛
وظيفة الإرجاع () {
إرجاع المرح. apply (كائن ، args) ؛
} ؛
} ؛
var bindaseventlistener = function (كائن ، متعة) {
var args = array.prototype.slice.call (وسيطات) .slice (2) ؛
وظيفة الإرجاع (الحدث) {
return fun.apply (Object ، [event || window.event] .Concat (args)) ؛
} ؛
} ؛
var exment = function (الوجهة ، المصدر) {
لـ (خاصية var في المصدر) {
الوجهة [الخاصية] = المصدر [خاصية] ؛
} ؛
} ؛
var class = function (properties) {
var _class = function () {return (وسيطات [0]! == null && this.initialize && typeof (this.initialize) == 'function')؟ this.initialize.apply (هذا ، الحجج): هذا ؛} ؛
_class.prototype = الخصائص ؛
العودة _class ؛
} ؛
// =========================================================== =============================================================
var selects = فئة جديدة ({
تهيئة: الوظيفة (الحاوية ، البيانات ، العنوان) {
this.container = حاوية ؛
this.num = title.length ؛
this.events = صفيف جديد (title.length-1) ؛
var i ، l ، select ؛
لـ (i = 0 ؛ i <this.num ؛ i ++)
{
container.innerhtml = container.innerhtml + "" + title [i] ؛
container.appendChild (document.createElement ('select')) ؛
}
SELECT = $$ (حاوية ، "حدد") [0] ؛
لـ (i = 0 ، l = data.length ؛ i <l ؛ i ++)
select.options.add (خيار جديد (البيانات [i] .txt ، i)) ؛
AddListener (SELECT ، "Change" ، bind (this ، this.change ، select ، data ، 0)) ؛
This.Change (SELECT ، DATA ، 0) ؛
} ،
تغيير: الدالة (OBJ ، البيانات ، num) {
if (num == this.num-1) return ؛
var menu = data [obj.value] .Menu ؛
SELECT = $$ (this.container ، 'select') [num+1] ؛
select.length = 0 ؛
إذا (! القائمة) العودة ؛
إذا (this.events [num]! = غير محدد) removelistener (حدد ، "تغيير" ، هذا.
this.events [num] = bind (this ، this.change ، select ، menu ، num+1)
AddListener (SELECT ، "Change" ، this.events [num]) ؛
لـ (var i = 0 ، l = menu.length ؛ i <l ؛ i ++)
select.options.add (خيار جديد (قائمة [i] .txt ، i)) ؛
This.Change (SELECT ، MENU ، NUM+1) ؛
}
}) ؛
// =========================================================== =============================================================
window.onload = function () {
var data = [{"txt": "Human Race" ، "Menu": [{"txt": "Magic Master" ، "Menu": [{"txt": "Magic Skill" ، "Menu": [{"txt": الأشياء "}]} ، {" txt ":" Snowstorm "،" Menu ": [{" txt ":" Magic Attack} ، {"txt": "AREA DARRIE لحظة}]} ، {"txt": "Hero Description" ، "Menu": [{"txt": "Intelect Hero" ، {"txt": "Strong Halo"} ، {"txt": المهارة "،" القائمة ": [{" txt ":" Storm Hammer "} ، {" TX T ":" Cone Ground "، {" txt ": القدرة "} ، {" txt ":" قصيرة "} ، {" txt ":" Great Skill Pervert "}]}]} ، {" tt "t": "Great Skill Pervert"}]}]}] ، {"tt" t ": xt ":" paladin "،" menu ": [{" txt ":" paladin skill "،" menu ": [{" txt ":" light "} ، {" txt ":" invincible "} ، {" txt ":" hara "} ، {" txt ":" crepection "} ، {" الوصف "،" القائمة ": [{" txt ":" قوة البطل "} ، {" txt ":" Assisted Hero "} ، {" txt ":" Personal Hunt "}]}]} ، {" txt ":" Blood Mage "، مهارة "،" قائمة ": [{" txt ":" flame "} ، {" txt ":" blue-absorbing "} ، {" txt ":" nonsity "} ، {" txt ": Hero "} ، {" txt ":" Assisted Hero "} ، {" txt ":" مثل هذا الوسيم "}]}]}]} ، {" txt ":" Beast Clan "،" Menu ": [{" txt ":" Silent Saint "، الخطوة "} ، {" txt ":" Shadow Clones "} ، {" txt ":" Critical Strike "} ، {" txt ": سرقة "} ، {" txt ":" غير لائقة وغير قابلة للشفاء "} ، {" txt ":" قوية جدًا "}]}]}} ، {" txt ":" النبي الرجل "،" القائمة ": [{" txt ": مهارة "،" قائمة ": [{" txt ":" wolf "} ، {" txt ":" day "} ، {" txt ": Hero "}]}]}]} ، {" txt ":" Tatou Chief "،" Menu ": [{" txt ":" shockwave "} ، {" txt ":" position "، الوصف "،" القائمة ": [{" txt ":" قوة البطل "} ، {" txt ":" Magic Power "} ، {" txt ":" Long Strong "، {" txt ": Skill "،" Menu ": [{" txt ":" Change Animal "} ، {" txt ":" Health Wave "} ، {" txt ": Power "} ، {" txt ":" Assisted Hero "}]}}]}]}]}]} ، {" txt ":" undead "،" menu ": [{" txt ": Halo "} ، {txt:" Death Contract "} ، {txt:" refrection of the Dead "}]} ، {" txt ":" Hero Description "،" Menu ": [{txt: Seth "}]}]}]} ، {" txt ":" lich "،" menu ": [{" txt ":" lich skill "،" menu ": [{txt: الوصف "،" القائمة ": [{txt:" ارتداء تنورة "} ، {txt:" All Bones "} ، {txt: الوصف "}]} ، {" txt ":" Prince Xiaoqiang "،" Menu ": [{" txt ":" Prince Skill "، {" txt ":" Hero Description "}]}] ؛
New Selects ($ ('Demo1') ، Data ، ["Race" ، "Hero"]) ؛
New Selects ($ ('Demo2') ، Data ، ["Race" ، "Hero" ، "Introduction"]) ؛
New Selects ($ ('Demo3') ، data ، ["Race" ، "Hero" ، "Introduction" ، "Skill"]) ؛
New Selects ($ ('Demo4') ، Data ، ["Race" ، "Hero" ، "Introduction" ، "Skill" ، "Skill Description"]) ؛
}
</script>
</body>
</html>