코드는 매우 간단합니다. 여기서는 주로이 코드의 구현 아이디어를 귀하에게 권장합니다.
코드 제공 :
코드 사본은 다음과 같습니다.
<! 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>
<스타일 유형 = "텍스트/CSS">
*{font-size : 14px;}
{높이 : 20px; font-size : 12px;} 선택
</스타일>
</head>
<body>
<div style = '색상 : 빨간색'> 2 레벨 링키지 </div>
<div id = 'demo1'> </div> <br> <br> <br>
<div style = '색상 : 빨간색'> 3 레벨 링키지 </div>
<div id = 'demo2'> </div> <br> <br> <br>
<div style = '색상 : 빨간색'> 4 레벨 링키지 </div>
<div id = 'demo3'> </div> <br> <br> <br>
<div style = '색상 : 빨간색'> 5 레벨 링키지 </div>
<div id = 'demo4'> </div> <br> <br> <br>
<script language = "javaScript">
var sys = (함수 (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)] them) == 6))? true : false;
s.ie7 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent)] thert; true : false;
s.ie8 = (s.ie && ([/msie (/d)/.0/i.exec(navigator.useragent)] them) == 8)))? true;
반환 s;
}) (navigator.useragent.tolowercase ());
sys.ie6 && document.execcommand ( "backgroundimagecache", false, true);
함수 $ (id) {
return document.getElementById (id);
};
함수 $$ (p, e) {
반환 p.getElementsByTagName (e);
};
함수 AddListener (요소, E, FN) {
element.addeventListener? element.addeventListener (e, fn, false) : element.attachevent ( "on" + e, fn);
};
함수 removelistener (요소, e, fn) {
요소 .removeEventListener? element.removeEventListener (e, fn, false) : element.detachevent ( "on" + e, fn);
};
var bind = 함수 (객체, 재미) {
var args = array.prototype.slice.call (arguments) .slice (2);
return function () {
return fun.apply (Object, Args);
};
};
var bindaseventlistener = 함수 (객체, 재미) {
var args = array.prototype.slice.call (arguments) .slice (2);
반환 기능 (이벤트) {
return fun.Apply (Object, [event || window.event] .concat (args));
};
};
var extend = function (대상, 소스) {
for (소스의 var 속성) {
대상 [속성] = 소스 [속성];
};
};
var class = 함수 (속성) {
var _class = function () {return (arguments [0]! == null && this.initialize && typeof (this.initialize) == 'function')? this.initialize.apply (this, arguments) : this;};
_class.prototype = 속성;
반환 _class;
};
// ==================================================================== ======================================================================
var selects = new Class ({
초기화 : 함수 (컨테이너, 데이터, 제목) {
this.container = 컨테이너;
this.num = title.length;
this.events = 새 배열 (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 = $$ (컨테이너, 'select') [0];
for (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, data, num) {
if (num == this.num-1) 반환;
var menu = data [obj.value] .menu;
select = $$ (this.container, 'select') [num+1];
select.length = 0;
if (! 메뉴) 반환;
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 (새 옵션 (메뉴 [i] .txt, i));
this.change (select, menu, num+1);
}
});
// ==================================================================== ======================================================================
Window.onload = function () {
var data = [{ "txt": "human Race", "menu": [{ "txt": "magic mas Things "}]}, {"txt ":"snowstorm ","menu ": [{"txt ":"magic take "}, {"txt ":"area damage "}, {"txt ":"매우 아름다운 "},"txt ":"txt "}}, {txt": "Glor Halo", "txt" MOMENT}]}, { "txt": "영웅 설명", "메뉴": [{ "txt": "Intellect Hero"}, { "txt": "Strong Halo"}, { "txt": "auxiliary"},]}}, { "txt": "언덕의 왕": "txt" Skill ","Menu ": [{"txt ":"Storm Hammer "}, {"tx t ":"cone pround "}, {"txt ":"cone diphragm "}, {"txt ":"영웅 설명 ","메뉴 ": [{"txt ":"Strength Hero "}, {"txt ":"Flash Dill 능력 "}, {"txt ":"short "}, {"txt ":"txt ":"Great Skill 변태 "}]}]}}, {"tt "t": "Great Skill 변태"}}]}}, { "tt"t ":"short "}}},"t "t" XT ":"paladin ","menu ": [{"txt ":"paladin skill ","menu ": [{"txt ":"light "}, {"txt ":"invincible "}, {"txt ":"hara "}, {"txt ":"resurrection "}]}, {"txt " 설명 ","메뉴 ": [{"txt ":"txt "}, {"txt ":"Assisted Hero "}, {"txt ":"개인 헌트 "}]}}}, {"txt ":"혈액 마법 ","메뉴 ": [{txt": "Blood Magage Skill ","Menu ": [{"txt ":"flame "}, {"txt ":"blue-jubsorbing "}, {"txt ":"nonsity "}, {"txt ":"divine bird phoenix "}]}, {"txt ":"영웅 설명 ": [{txt": "jorthet" Hero "}, {"txt ":"Assisted Hero "}, {"txt ":"sulect ":"that worly "}}]}}}, {"txt ":"Beast Clan ","Menu ": [{"txt ":"Silent Saint ","메뉴 ": ["Txt ":"메뉴 "," "" "" "" "" "" "" "" "." step "}, {"txt ":"shad Robbing "}, {"txt ":"Invecent and Invincible "}, {"txt ":"very strolge "}]}}}, {"txt ":"Prophet Man ","메뉴 ": [{"txt ":"Prophet Skill ","Menu ": [{"txt ":"wolf "}, {"txt ":"day "}, {"txt ":"Lightning Chain "}, {"txt ":"Earthquake "}]}, {"txt ":"Hero Description ","메뉴 ": ["txt ":"txt "}, {"txt " 영웅 "}]}]}]}, {"txt ":"tatou chief ","menu ": [{"txt ":"shockwave "}, {"txt ":"position "}, {"txt ":"Durability Halo "}, {"txt ":"resurrection "}]}, {txt" 설명 ","메뉴 ": [{"txt ":"txt "}, {"txt ":"magic power "}, {"txt ":"긴 강력한 "}, {"txt ":"고기 방패 "}]}}}, {"txt ":"small yy ","메뉴 ":"txt ":"{txt ":"{txt " Skill ","Menu ": [{"txt ":"change Animal "}, {"txt ":"txt ":"Health wave "}, {"txt ":"작은 뱀 스틱 "}, {"txt ":"everything invincible "}]}, {"txt ":"영웅 설명 ","메뉴 ": ["txt ":"magile}, "txt": "txt": "txt" Power "}, {"txt ":"Assisted Hero "}]}]}]}]}]}]}, {"txt ":"nead ","메뉴 ": ["txt ":"죽음의 기사 ","메뉴 ":"txt ":"Dead Rider Skill ","메뉴 ": [txt :"{txt : "txt :"txt : "txt :"txt : "txt" Halo "}, {txt :"death contract "}, {txt :"죽음의 부활 "}]}, {"txt ":"영웅 설명 ","메뉴 ": [{txt :"양의 양 "}, {txt :"{txt : "ah"ah. seth "}]}]}]}, {"txt ":"lich ","menu ": [{"txt ":"리치 스킬 ","메뉴 ": [{txt :"Raging Ice "}, {txt :"ice armor "}, {txt :"contract "}, {txt :"}, {txt : "}, {txt :"}}, 설명 ","메뉴 ": [{txt :"치마 착용 "}, {txt :"All Bones "}, {txt :"No Man 또는 Woman "}]}]}}]}]}]}}, {"txt ":"두려움 악마 ","메뉴 ": ["txt ":"Demon King Skill "}, {"TXT ":"영웅 " 설명 "}]}, {"txt ":"prince xiaoqiang ","menu ": [{"txt ":"prince skill "}, {"txt ":"영웅 설명 "}}]}];
New Selects ($ ( 'demo1'), data, [ "Race", "Hero"]);
New Selects ($ ( 'Demo2'), Data, [ "Race", "Hero", "Sociled"]);
New Selects ($ ( 'Demo3'), Data, [ "Race", "Hero", "Socile", "Skill"]);
New Selects ($ ( 'Demo4'), Data, [ "Race", "Hero", "Sectrion", "Skill", "Skill Description"]);
}
</스크립트>
</body>
</html>