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 = (function(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;
  return 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);
};
function 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 function() {
    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, argument) : this;};
  _class.prototype = プロパティ;
  return _class;
};

//=========================================== ================================================= ===========================
var Selects = 新しいクラス({
 初期化:function(container,data,title){
  this.container = コンテナ;
  this.num = title.length;
  this.Events = new Array(title.length-1);
  var i,l,select;
  for(i=0; i   {
   container.innerHTML =container.innerHTML " " title[i];
   Container.appendChild(document.createElement('select'));
  }
  select = $$(container,'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);
 }、
 変更: 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]!=unknown)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(select,menu,num 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":"丘の王", "メニュー" :[{"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,["race","hero"]);
new Selects($('demo2'),data,["レース","ヒーロー","紹介"]);
new Selects($('demo3'),data,["種族","ヒーロー","紹介","スキル"]);
new Selects($('demo4'),data,["種族","ヒーロー","紹介","スキル","スキルの説明"]);
}