Javascript는 무한 선택 연결 menu_javascript 기술을 구현합니다.

코드는 매우 간단합니다. 여기서는 독특한 이 코드의 구현 아이디어를 주로 추천합니다.

코드 제공:

코드 복사 코드는 다음과 같습니다.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



 

2级联动

3级联动

4级联动

5级联动

<스크립트 언어="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)][0][1] == 6))?true:false;
  s.IE7 = (s.IE&&([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;
  s.IE8 = (s.IE&&([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;
  반품하세요;
})(navigator.userAgent.toLowerCase());
Sys.IE6&&document.execCommand("BackgroundImageCache", false, true);
$(ID) 함수{
  return document.getElementById(Id);
};
$$(p,e) 함수{
  return p.getElementsByTagName(e);
};
함수 addListener(요소,e,fn){
  element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" e,fn);
};
함수 제거리스너(요소,e,fn){
  element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" e,fn);
};
var Bind = 함수(객체, 재미) {
  var args = Array.prototype.slice.call(arguments).slice(2);
  반환 함수() {
    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 = 함수(대상, 소스){
  for(소스의 var 속성) {
    목적지[속성] = 소스[속성];
  };
};
var 클래스 = 함수(속성){
  var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, 인수) : this;};
  _class.prototype = 속성;
  return _class;
};

//=========================================== ================================================= ===========================
var 선택 = 새 클래스({
 초기화 :함수(컨테이너, 데이터, 제목){
  this.container  = 컨테이너;
  this.num = title.length;
  this.Events = new Array(title.length-1);
  var i,l,select;
  for(i=0; i   {
   컨테이너.innerHTML = 컨테이너.innerHTML "　" 제목[i];
   컨테이너.appendChild(document.createElement('select'));
  }
  선택 = $$(컨테이너,'선택')[0];
  for(i=0,l=data.length;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);
 },
 변경 : 함수(obj,data,num){
  if(num == this.num-1)return;  
  var 메뉴 = 데이터[obj.value].menu;
  select = $$(this.container,'select')[숫자 1];
  선택.길이 = 0;  
  if(!menu)return;
  if(this.Events[숫자]!=정의되지 않음)removeListener(select,'change',this.Events[숫자])
  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    select.options.add(new Option(menu[i].txt,i));
  this.Change(select,menu,num 1); 
 }
});

//=========================================== === ============================================== === ===========================
window.onload = 함수(){
var data=[{"txt":"인종","menu":[{"txt":"대마법사","menu":[{"txt":"다파 스킬","menu":[{ " txt":"물 요소","menu":[{"txt":"소환"},{"txt":"피어싱 공격"},{"txt":"아주 좋은 일입니다"}]},{ "txt":"블리자드","menu":[{"txt":"마법 공격"},{"txt":"범위 피해"},{"txt":"매우 아름답습니다"},{"txt" :"방해될 수 있음"}]},{"txt":"Brilliant Halo"},{"txt":"Teleport"}]},{"txt":"영웅 설명","menu":[ {" txt":"지능 영웅"},{"txt":"강력한 오라"},{"txt":"보조"},]}]},{"txt":"언덕의 왕", "메뉴" :[{"txt":"힐 스킬","menu":[{"txt":"스톰 해머"},{"txt":"원뿔"},{"txt":" 원뿔 헤일로"},{ "txt":"신이 땅에 내려오다"}]},{"txt":"영웅 설명","menu":[{"txt":"파워 히어로"},{"txt":" 즉시 처치 능력" },{"txt":"매우 짧음"},{"txt":"훌륭한 기술"}]}]},{"txt":"팔라딘","menu":[{" txt":"팔라딘 스킬 ","menu":[{"txt":"빛"},{"txt":"무적"},{"txt":"Halo"},{"txt":" 부활"}]},{ "txt":"영웅 설명","menu":[{"txt":"파워 히어로"},{"txt":"보조 영웅"},{"txt":"개인 이름 Nanny"}]}] },{"txt":"혈법사","menu":[{"txt":"혈법사 기술","menu":[{"txt":"Flame"},{ "txt":"Suck 파란색"},{"txt":"무"},{"txt":"마법의 새 불사조"}]},{"txt":"영웅 설명","menu":[{ "txt":"지능 영웅"},{"txt":"보조 영웅"},{"txt":"매우 잘생겼습니다"}]}]}]},{"txt":"오크", "menu":[{"txt" :"Bad Saint","menu":[{"txt":"Bad Saint Skills","menu":[{"txt":"Wind Step"},{"txt ":"Shadow Clone"},{ "txt":"치명타"},{"txt":"블레이드 스톰"}]},{"txt":"영웅 설명","menu":[{ "txt":"민첩한 영웅"},{ "txt":"고공격 영웅"},{"txt":"물건을 죽이고 훔치는 행위"},{"txt":"외설적이고 천하무적"},{"txt":"매우 강력함"}]}]} ,{"txt":"예언자 남자","menu":[{"txt":"예언자 기술","menu":[{"txt":"늑대"},{" txt":"日"} ,{"txt":"번개 사슬"},{"txt":"지진"}]},{"txt":"영웅 설명","menu":[{"txt" :"지능 영웅"}, {"txt":"괴롭힘 영웅"}]}]},{"txt":"타우렌 족장","menu":[{"txt":"타우렌 기술","menu ":[{"txt": "충격파"},{"txt":"위치"},{"txt":"내구성 후광"},{"txt":"부활"}]},{"txt" :"영웅 설명"," menu":[{"txt":"파워 히어로"},{"txt":"강력한 마법"},{"txt":"길고 강력한"},{"txt" :"인간 방패"}] }]},{"txt":"리틀 YY","menu":[{"txt":"리틀 Y 스킬","menu":[{"txt":"동물 변경"},{"txt" :"치유의 물결"},{"txt":"작은 뱀 막대기"},{"txt":"모두 무적"}]},{"txt":"영웅 설명", "menu":[{"txt ":"민첩 영웅"},{"txt":"강력한 마법"},{"txt":"보조 영웅"}]}]}]},{"txt":" 언데드","menu":[ {"txt":"죽음의 기사","menu":[{"txt":"죽음의 기사 기술","menu":[{txt:"젠장 투투"}, {txt:"Evil Aura"},{ txt:"죽음의 계약"},{txt:"언데드의 부활"}]},{"txt":"영웅 설명","menu":[{txt:"타는 것은 양이다"},{txt: "조기 노화"},{txt:"Frostmourne"},{txt:"Ah Seth"}]}]},{"txt":"Lich" ,"menu":[{"txt":"Lich Skills" ,"menu":[{txt:"얼음"},{txt:"얼음 갑옷"},{txt:"계약"},{txt :"죽음과 부패"}]},{"txt":"영웅 Description","menu":[{txt:"치마 입기"},{txt:"모든 뼈"},{txt:"남자가 아님, 남자가 아님 여자"}]}]},{"txt" :"공포의 군주","menu":[{"txt":"악마 기술"},{"txt":"영웅 설명"}]},{"txt ":"Prince Xiaoqiang","menu":[ {"txt":"프린스 스킬"},{"txt":"영웅 설명"}]}]}];
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","소개","skill","skill 설명"]);
}