Код очень прост. Здесь я в основном рекомендую для вас идеи реализации этого кода, которые являются уникальными.
Предоставьте код:
Кода -копия выглядит следующим образом:
<! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> выбирает </title>
<стиль типа = "text/css">
*{font-size: 14px;}
Выберите {высота: 20px; размер font: 12px;}
</style>
</head>
<тело>
<div style = 'color: red'> 2-уровневая связь </div>
<div id = 'demo1'> </div> <br> <br> <br>
<div style = 'color: red'> 3-уровневая связь </div>
<div id = 'demo2'> </div> <br> <br> <br>
<div style = 'color: red'> 4-уровневая связь </div>
<div id = 'demo3'> </div> <br> <br> <br>
<div style = 'color: red'> 5-уровневая связь </div>
<div id = 'demo4'> </div> <br> <br> <br>
<script language = "javascript">
var sys = (function (ua) {
var s = {};
s.ie = ua.match (/msie ([/д. Затем+)/)?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)Ynпечати
s.ie7 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.Useragent)Ynпечати
s.ie8 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.Useragent)Ynпечати
возврат S;
}) (NAVIGATOR.USERAGENT.TOLOWERCASE ());
Sys.ie6 && document.execcommand ("founalImageCache", 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);
};
функция removeListener (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);
return function () {
вернуть fun.apply (объект, args);
};
};
var bindaseventlistener = function (Object, Fun) {
var args = array.prototype.slice.call (аргументы) .slice (2);
возврат функции (событие) {
return fun.apply (Object, [event || window.event] .concat (args));
};
};
var extend = function (destination, source) {
для (var свойство в источнике) {
пункт назначения [свойство] = источник [свойство];
};
};
var class = function (свойства) {
var _class = function () {return (аргументы [0]! == null && this.initialize && typeof (this.initialize) == 'function')? this.initialize.apply (это, аргументы): this;};
_class.prototype = свойства;
вернуть _class;
};
// =================================================================== =====================================================================
var selects = новый класс ({
инициализировать: function (контейнер, данные, заголовок) {
this.container = контейнер;
this.num = title.length;
this.events = new Array (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 (новая опция (data [i] .txt, i));
AddListener (выберите, «изменить», bind (this, this.change, select, data, 0));
this.Change (SELECT, DATA, 0);
},
Изменение: функция (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 (! Меню) возвращение;
if (this.events [num]! = undefined) removelistener (select, 'изменение', this.events [num])
this.events [num] = bind (this, this.change, select, menu, num+1)
AddListener (выберите, «Изменить», this.events [num]);
для (var i = 0, l = menu.length; i <l; i ++)
select.options.add (новая опция (меню [i] .txt, i));
это.
}
});
// =================================================================== =====================================================================
window.onload = function () {
var data = [{"txt": "человеческая раса", "меню": [{"txt": "Magic Master", "Menu": [{"txt": "Magic Skill", "Menu": [{"txt": "Water Element", "Menu": [{"txt": "Summoning" {"," txt ":" puncture ":" atex ":", ",", ",", ":", ",": ":", ":« Вещи "}]}, {" txt ":" Snowmporm "," Menu ": [{" txt ":" Magic Attack "}, {" txt ":" Область повреждения "}, {" txt ":" очень красиво "}, {" txt ":" может быть прерван "}]}, {" txt ":" klorious "," x xt ":" in xt ":" in xt ":" in xt ":" in xt ":" in xt ":" Moment}]}, {«txt»: «Описание героя», «меню»: [{«txt»: «Hero»}, {"txt": "Сильный Halo"}, {"txt": "Auxiliary"},]}]}, {"txt": "King of the Hill", ",": "Txt": "Txt": "Txt": "Txt": "Txt": "Txt": "Txt": "Txt": "TXT": "TXT": "TXT": "TXT": "" Навык "," Menu ": [{" txt ":" Storm Hammer "}, {" tx t ":" конусная земля "}, {" txt ":" cone diaphragm "}, {" txt ":" Hero Description "," Menu ": [{" txt ":" hero "}, {" txt ":" flash ": Способность "}, {" txt ":" short "}, {" txt ":" Откровенный навык "}]}]}]}, {" tt "t": "Откровенный навык"}]}]}]}, {"tt" t ":" short "}]}, {" t "t" t "t" "t" t "t" t "t" T " XT ":" Paladin "," Menu ": [{" txt ":" Paladin Skill "," Menu ": [{" txt ":" Light "}, {" txt ":" Invincible "}, {" txt ":" hara "}, {" txt ":" resrrection "}}}, {{{{{{}": "Txt Описание "," Меню ": [{" txt ":" Сила Hero "}, {" txt ":" Homped Hero "}, {" txt ":" Личная охота "}]}]}, {" txt ":" Blood Mage "," Menu ": [{" txt ":" Mage Blood Mage ":" Menu ": [{" txt ":" Навык "," Menu ": [{" txt ":" flame "}, {" txt ":" blue-absorbing "}, {" txt ":" Неудовлетворительный "}, {" txt ":" Divine Bird Phoenix "}]}, {" txt ":" encement ",": " Hero "}, {" txt ":" Assisted Hero "}, {" txt ":" такой красивый "}]}]}]}]}, {" txt ":" Clan Beast "," Menu ": [{" txt ":" Silent Saint "," Menu ": [[" txt ":", "," xt ":": "xt": "xex": "" ". Шаг "}, {" txt ":" Clone "}, {" txt ":" Critical Strike "}, {" txt ":" Blade Storm "}]}, {" txt ":" Описание героя "," Menu ": [{" txt ":" Agile Hero "}, {" txt ":" High Attatace Hero "}," TXT "{" TXT " ROBBING "}, {" txt ":" indecent и непобедимый "}, {" txt ":" очень мощный "}]}]}]}, {" txt ":" Пророчный человек "," меню ": [{" txt ":" Пророк Навык "," Menu ": [{" txt ":" Wolf "}, {" txt ":" day "}, {" txt ":" молния "}, {" txt ":" Earthquake "}]}, {" txt ":" Описание героя "," Menu ": [{" txt ":" intellect "{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{xember", "txt" {{{{{{xess "," {{{{{xess ":" {{{{xess ":" Hero "}]}]}]}, {" txt ":" tatou Chief "," menu ": [{" txt ":" Shockwave "}, {" txt ":" position "}, {" txt ":" Durability Halo "}, {" txt ":"}}}, "txt": "txt": "txt": "txt": "Txt": "Txt": "Txt": "Hero": "Txt": "{}": "TXT": "{}": "TXT": "Hero"}, {"txt"}, {}}}, "TXT". Описание "," Menu ": [{" txt ":" Сила Hero "}, {" txt ":" Magic Power "}, {" txt ":" Long Motation "}, {" txt ":" a Щит мясной Навык "," Menu ": [{" txt ":" Изменение животного "}, {" txt ":" Wave "}, {" txt ":" Little Snake Stick "}, {" txt ":" Все непобедимым "}]}, {" txt ":" Hero "," menu ": [{" txt ":" agile hero "," agile ",", "x agile", ",", ",", ",", ":" aG, "," aG, "," aG, ",", "aG,", "aG,", "aG,", "aG,", "aG,", "aG,", "aG,", "aG," aG, ":" aG, "," aG, ",", "Menu": [{"txt": "agile Hero": "." Power "}, {" txt ":" Assisted Hero "}]}]}]}]}]}, {" txt ":" нежить "," меню ": [{" txt ":" Knight Death Knight "," Menu ": [{" txt ":" Dead Rider "," Menu ": [txt:" stool Tumblr ", stoolr", stoolr ". Halo "}, {txt:" Death Contract "}, {txt:" Воскресение мертвых "}]}, {" txt ":" Описание героя "," Меню ": [{txt:" езда на овце "}, {txt:« До старого возраста »}, {txt:" Frost "}, {txt:" Ах: " Seth "}]}]}]}, {" txt ":" lich "," menu ": [{" txt ":" Lich Skill "," Menu ": [{txt:" Raging Ice "}, {txt:" Ice Armor "}, {txt:" Contract "}, {txt:" stuce "}", "{txt:"}, {txt: ""} ","} ","} ","} "," {txt: "}, {{txt:" ":": ":": ":": ":": ":"} "," Описание "," Menu ": [{txt:" носить юбку "}, {txt:" all Bones "}, {txt:" no Man или женщина "}]}]}]}, {" txt ":" Fear Demon King "," Menu ": [{" txt ":" Demon King Skill "}, {" TXT ":" TXT ":" TXT ":" TXT ":" TXT ":" TXT ":" TXT ":" TXT ":" TXT ":" TXT ":" TXT ":" TXT ":" TXT ":" TXT ":". Описание "}]}, {" txt ":" Prince xiaoqiang "," Menu ": [{" txt ":" Prince Skill "}, {" txt ":" Hero Description "}]}]}];
new Selects ($ ('demo1'), data, ["Race", "Hero"]);
New Selects ($ ('demo2'), Data, ["Race", "Hero", "Введение"]);
new Selects ($ ('demo3'), Data, [«Раса», «Герой», «Введение», «Навык»]);
new Selects ($ ('demo4'), Data, [«Раса», «Герой», «Введение», «Навык», «Описание навыков»]);
}
</script>
</body>
</html>