コードは非常に簡単です。ここでは、主にこのコードの実装アイデアをお勧めします。これはユニークです。
コードを提供します：
コードコピーは次のとおりです。
<！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">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<Title>選択</title>
<style type = "text/css">
*{font-size：14px;}
select {height：20px; font-size：12px;}
</style>
</head>
<body>
<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>
<スクリプト言語= "javascript">
var sys =（function（ua）{
var s = {};
s.ie = ua.match（/msie（[/d.]+）/）？true:false;
s.firefox = ua.match（/firefox //（[/d。]+）/）？true：fals;
s.chrome = ua.match（/chrome //（[/d。]+）/）？true：false;
s.ie6 =（s.ie &&（[/msie（/d）/i.exec(navigator.useragent）] == 6）？true：false;
s.ie7 =（s.ie &&（[/msie（/d）/i.exec(navigator.useragent）] == 7））？true：false;
s.ie8 =（s.ie &&（[/msie（/d）/i.exec(navigator.useragent）] == 8））？true：false;
s;
}）（navigator.useragent.tolowercase（））;
sys.ie6 && document.execcommand（ "backgroundimagecache"、false、true）;
function $（id）{
document.getElementByID（ID）を返します。
};
関数$$（P、E）{
p.getElementsByTagname（e）を返します。
};
関数addListener（Element、e、fn）{
element.addeventlistener？element.addeventlistener（e、fn、false）：element.attachevent（ "on" + e、fn）;
};
関数removelistener（要素、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プロパティ）{
宛先[プロパティ] =ソース[プロパティ];
};
};
var class = function（properties）{
var _class = function（）{return（arguments [0]！== null && this.Initialize && typeof（this.initialize）== 'function'）？ this.Initialize.Apply（this、arguments）：this;};
_Class.Prototype = Properties;
_classを返す;
};
// =================================================================================== ===============================================================================
var selects = new class（{
初期化：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）;
}、
変更：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"： "Human Rance"、 "Menu"：[{"txt"： "Magic Master"、 "Menu"：["txt"： "Magic Skill"、 "Menu"：[{"txt"： "Water Element"、 "Menu"：[{"txt"： "" summoning "}、物事 "}]}、{" txt "：" Snowstorm "、" Menu "：[{" txt "：" Magic Attack "}、{" txt "：" "txt"}、{"txt"}、{"txt"： "can count"}]}、{"txt"： "glorious halo" Moment}]}、{"txt"： "Hero description"、 "Menu"：[{"txt"： "Intellect Hero"}、{"txt"： "strong halo"}、{"txt"： "auxiliary"}、]}、}、{"txt"： "king of the Hill"、 "" "txt"： "" "" "txt"： "" "txt"スキル "、"メニュー "：[{" txt "：" Storm Hammer "}、{" tx t "：" cone ground "}、{" txt "：" cone diaphragm "}、{" txt "：" Hero description "、" Menu "：[{" txt "：" strength Hero "}、{" txt "：" flash kill能力 "}、{" txt "：" short "}、{" txt "：" great skill forvert "}]}]}]}、}、{" tt "t" "}]：" great Skill forvert "}]}]}、{" tt "t"： "short"}]}]} xt "：" paladin "、" menu "：[{" txt "：" paladin skill "、" menu "：[{" txt "：" light "}、{" txt "：" invincible "}、{" txt "：" hara "}、{" txt "：" resurection "}}説明 "、"メニュー "：[{" txt "：" strength hero "}、{" txt "：" assisted hero "}、{" txt "：" personal Hunt "}]}、{" txt "：" blood mage "、" menu "：[{" txt "：" blood mage Skill","menu":[{"txt":"Flame"},{"txt":"Blue-absorbing"},{"txt":"Nonsity"},{"txt":"Divine Bird Phoenix"}]},{"txt":"Hero description","menu":[{"txt":"Intellect hero"},{"txt":"Assisted Hero "}、{" txt "："そのようなハンサム "}]}]}]}]}、{" txt "：" beast clan "、" menu "：[" txt "：" silent Saint "、" Menu "：[{" txt "：" saint slike "、" "：" "txt" " clones "}、{" txt "：" critival strike "}、{" txt "：" blade storm "}、{" txt "}、{" txt "：" hero description "、" menu "：[{" txt "：" agile hero "}、{" txt "：" high Attest Hero "}、{" txt " Invincible "}、{" txt "："非常に強力な "}]}]}]}、{" txt "："預言者 "、"メニュー "：[{" txt "："預言者スキル "、" {"txt"： "地震"}]}、{"txt"： "hero description"、 "menu"：["txt"： "Intellect Hero"}、{"txt"： "txt"： "txt"： "txt"}]} }、{"txt"： "position"}、{"txt"： "durability halo"}、{"txt"： "resurrection"}]}、{"txt"： "hero description"、 "menu"：[{"txt"： "強度ヒーロー"}、{"txt"強力な "}、{" txt "：" A Meat Shield "}]}]}]}、{" txt "：" small yy "、" menu "：[{" txt "：" small yスキル "、"メニュー "：[" txt "：" chang animal "}、{" txt "：" health wave "}、{txt"： "" Stick "}、{" txt "："すべて無敵 "}]}、{" txt "：" hero description "、" menu "：[{" txt "：" agile hero "}、{" txt "：" Magic Power "}、{" txt "：" assistedヒーロー "}]}]}]}]}、{" txt "：" undead "、" menu "：[{" txt "：" death night "、" menu "：[{" txt "：" dead rider skill "、" menu "：[{txt：" sustool tumblr "}、{txt：" '' '' halo "契約 "}、{txt：" resurrection of the dead "}]}、{" txt "：" Hero description "、" Menu "：[{txt：" Rishing A Hheep "}、{txt：" "}、" "txt：" frost Sorrow "}、{txt："} lich "、" menu "：[{" txt "：" lich skill "、" menu "：[{txt：" raging Ice "}、{txt：" Ice Armor "}、{txt：" contract "}、{txt："死と萎縮 "}]}、{" Txt "：" Hero description "、" "：" "：" "Meni" Skirt "}、{txt：" All Bones "}、{txt：" no man or woman "}]}]}]}、{" txt "：" fear demon king "、" menu "：[{" txt "：" demon kingスキル "}、{" txt "：" "Heroc} Xiaoqiang "、" menu "：[{" txt "：" prince skill "}、{" txt "：" hero description "}]}]}];
new Selects（$（ 'demo1'）、data、["race"、 "hero"]）;
new selects（$（ 'demo2'）、data、["race"、 "hero"、 "introdution"]）;
new Selects（$（ 'demo3'）、data、["race"、 "hero"、 "introdution"、 "skill"]）;
new Selects（$（ 'demo4'）、data、["race"、 "hero"、 "introdution"、 "skill"、 "skill description"]）;
}
</script>
</body>
</html>