javascript實作無限級select連動選單_javascript技巧

程式碼很簡單，這裡主要是給大家推薦一下本程式碼的實作思路，別具一格。

奉上代碼：

複製程式碼 程式碼如下:

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



 

2级联动

3级联动

4级联动

5级联动

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;
  返回 s;
})(navigator.userAgent.toLowerCase());
Sys.IE6&&document.execCommand("BackgroundImageCache", false, true);
函數 $(Id){
  return document.getElementById(Id);
};
函數 $$(p,e){
  return p.getElementsByTagName(e);
};
function 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(object, fun) {
  var args = Array.prototype.slice.call(arguments).slice(2);
  返回函數() {
    return fun.apply(object, args);
  };
};
var BindAsEventListener = function(object, fun) {
  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 = 屬性;
  返回類別;
};

//============================================= = =================================================== == == =============================
var Selects = new Class({
 初始化：函數（容器，數據，標題）{
  this.container = 容器;
  this.num = title.length;
  this.Events = new Array(title.length-1);
  var i,l,選擇;
  for(i=0; i   {
   Container.innerHTML = Container.innerHTML " " title[i];
   container.appendChild(document.createElement('select'));
  }
  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(選擇,數據,0);
 },
 更改：函數（obj，數據，num）{
  if(num == this.num-1)return;  
  var menu = data[obj.value].menu;
  select = $$(this.container,'select')[num 1];
  選擇.長度= 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    select.options.add(new Option(menu[i].txt,i));
  this.Change(選擇,選單,數字 1); 
 }
});

//============================================= ==================================================== ===========================
window.onload = function(){
var data=[{"txt":"人族","menu":[{"txt":"大法師","menu":[{"txt":"大法技能","menu":[{" txt":"水元素","menu":[{"txt":"召喚物"},{"txt":"穿刺攻擊"},{"txt":"很好東西"}]},{ "txt":"暴風雪","menu":[{"txt":"魔法攻擊"},{"txt":"面積傷害"},{"txt":"很漂亮"},{"txt" :"可中斷"}]},{"txt":"輝煌光環"},{"txt":"瞬間移動"}]},{"txt":"英雄說明","menu":[ {"txt":"智力英雄"},{"txt":"強大光環"},{"txt":"輔助型"},]}]},{"txt":"山丘之王", "menu":[{"txt":"山丘技能","menu":[{"txt":"風暴之鎚"},{"txt":"錐地"},{"txt":"錐暈"},{"txt":"天神下凡"}]},{"txt":"英雄說明","menu":[{"txt":"力量英雄"},{"txt":"秒殺能力"},{"txt":"個子很矮"},{"txt":"大技變態"}]}]},{"txt":"聖騎士","menu":[{" txt":"聖騎技能","menu":[{"txt":"光"},{"txt":"無敵"},{"txt":"光環"},{"txt":"復活"}]},{"txt":"英雄說明","menu":[{"txt":"力量英雄"},{"txt":"輔助英雄"},{"txt":"人稱奶媽"}]}]},{"txt":"血法師","menu":[{"txt":"血法技能","menu":[{"txt":"火焰"},{ "txt":"吸藍色"},{"txt":"虛無"},{"txt":"神鳥鳳凰"}]},{"txt":"英雄說明","menu":[{ "txt":"智力英雄"},{"txt":"輔助英雄"},{"txt":"長的很帥"}]}]}]},{"txt":"獸族", "menu":[{"txt":"賤聖","menu":[{"txt":"賤聖技能","menu":[{"txt":"疾風步"},{"txt ":"影分身"},{"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:"邪惡光環"},{txt:"死亡契約"},{txt:"復活亡靈"}]},{"txt":"英雄說明","menu":[{txt:"騎的是羊"},{txt:"未老先衰"},{txt:"冰霜之哀"},{txt:"啊而塞思"}]}]},{"txt":"巫妖" ,"menu":[{"txt":"巫妖技能","menu":[{txt:"暴冰"},{txt:"冰甲"},{txt:"契約"},{txt :"死亡凋零"}]},{"txt":"英雄說明","menu":[{txt:"穿裙子"},{txt:"全是骨頭"},{txt:"不男不女"}]}]},{"txt":"恐懼魔王","menu":[{"txt":"魔王技能"},{"txt":"英雄說明"}]},{"txt ":"小強王子","menu":[{"txt":"王子技能"},{"txt":"英雄說明"}]}]}];
 new Selects($('demo1'),data,["種族","英雄"]);
 new Selects($('demo2'),data,["種族","英雄","介紹"]);
 new Selects($('demo3'),data,["種族","英雄","介紹","技能"]);
 new Selects($('demo4'),data,["種族","英雄","介紹","技能","技能說明"]);
}