Javascript implémente les compétences menu_javascript de liaison de sélection infinie

Le code est très simple. Ici, je recommande principalement les idées d'implémentation de ce code, qui est unique.

Fournir le code :

Copier le code Le code est le suivant :

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



 

2级联动

3级联动

4级联动

5级联动

var Sys = (fonction(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;
  retourner s;
})(navigator.userAgent.toLowerCase());
Sys.IE6&&document.execCommand("BackgroundImageCache", false, true);
fonction $(Id){
  return document.getElementById(Id);
};
fonction $$(p,e){
  return p.getElementsByTagName(e);
};
fonction addListener(element,e,fn){
  element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" e,fn);
};
fonction removeListener(element,e,fn){
  element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" e,fn);
};
var Bind = fonction (objet, amusant) {
  var args = Array.prototype.slice.call(arguments).slice(2);
  return function() {
    return fun.apply(object, args);
  };
};
var BindAsEventListener = fonction (objet, amusant) {
  var args = Array.prototype.slice.call(arguments).slice(2);
  fonction de retour (événement) {
    return fun.apply(object, [event || window.event].concat(args));
  };
};
var Extend = fonction (destination, source){
  pour (propriété var dans la source) {
    destination[propriété] = source[propriété];
  };
};
var Classe = fonction (propriétés) {
  var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
  _class.prototype = propriétés;
  retourner _class;
};

//============================================= =================================================== ===========================
var Sélectionne = nouvelle classe ({
 initialiser :function(conteneur,données,titre){
  this.container  = conteneur;
  this.num = titre.longueur;
  this.Events = new Array(title.length-1);
  var je,l,select;
  pour(i=0; i   {
   conteneur.innerHTML = conteneur.innerHTML "　" titre[i];
   conteneur.appendChild(document.createElement('select'));
  >
  select = $$(conteneur,'select')[0];
  pour(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);
 },
 Changement : 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)retour;
  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]);  
  pour(var i=0,l=menu.length;i    select.options.add(new Option(menu[i].txt,i));
  this.Change(sélectionner,menu,numéro 1); 
 >
});

//============================================= === ================================================ === ===========================
window.onload = function(){
var data=[{"txt":"Race humaine","menu":[{"txt":"Arch Mage","menu":[{"txt":"Compétences de Dafa","menu":[{ " txt":"Élément Eau","menu":[{"txt":"Invocation"},{"txt":"Attaque perçante"},{"txt":"Très bonne chose"}]},{ "txt": Blizzard, "menu": [{"txt": "Attaque magique"}, {"txt": "Dégâts de zone"}, {"txt": "Très beau"}, {"txt" :"Peut être interrompu"}]},{"txt":"Halo brillant"},{"txt":"Téléportation"}]},{"txt":"Description du héros","menu":[ {" txt":"Héros du renseignement"},{"txt":"Aura puissante"},{"txt":"Auxiliaire"},]}]},{"txt":"Roi de la Colline", "menu" :[{"txt":"Hill Skill","menu":[{"txt":"Storm Hammer"},{"txt":"Cône"},{"txt":" Cone Halo"},{ "txt": "Dieu descend sur terre"}]},{"txt": "Description du héros", "menu": [{"txt": "Power Hero"}, {"txt": "Capacité de mise à mort instantanée" },{"txt":"Très court"},{"txt":"Grande compétence"}]}]},{"txt":"Paladin","menu":[{" txt":"Compétences du Paladin ","menu":[{"txt":"Lumière"},{"txt":"Invincible"},{"txt":"Halo"},{"txt":"Résurrection"}]},{ "txt": "Description du héros", "menu": [{"txt": "Power Hero"}, {"txt": "Héros auxiliaire"}, {"txt": "Nom personnel de la nounou"}]}] },{"txt":"Mage de sang","menu":[{"txt":"Compétences de mage de sang","menu":[{"txt":"Flamme"},{ "txt":"Suck Bleu"},{"txt":"Néant"},{"txt":"Magic Bird Phoenix"}]},{"txt":"Description du héros","menu":[{ "txt":"Intelligence Héros"},{"txt":"Héros auxiliaire"},{"txt":"Très beau"}]}]}]},{"txt":"Orque", "menu":[{"txt" :"Bad Saint","menu":[{"txt":"Compétences de Bad Saint","menu":[{"txt":"Pas de vent"},{"txt ":"Clone de l'ombre"},{ "txt": "Critical Strike"}, {"txt": "Blade Storm"}]}, {"txt": "Description du héros", "menu": [{ "txt": "Agile hero"},{ "txt": "Héros à haute attaque"}, {"txt": "Tuer et voler des biens"}, {"txt": "Obscène et invincible"}, {"txt": "Très puissant"}]}]} ,{"txt":"Prophète Homme","menu":[{"txt":"Compétences de prophète","menu":[{"txt":"Loup"},{" txt":"日"} ,{"txt":"Chaîne de foudre"},{"txt":"Tremblement de terre"}]},{"txt":"Description du héros","menu":[{"txt" :"Héros du renseignement"}, {"txt":"Héros du harcèlement"}]}]},{"txt":"Chef Tauren","menu":[{"txt":"Compétences Tauren","menu ":[{"txt": "Shock Wave"},{"txt":"Position"},{"txt":"Durable Halo"},{"txt":"Resurrection"}]},{"txt" :"Description du héros"," menu":[{"txt":"Power Hero"},{"txt":"Magie puissante"},{"txt":"Long et puissant"},{"txt" :"Un bouclier humain"}] }]},{"txt":"Petit YY","menu":[{"txt":"Compétence Petit Y","menu":[{"txt":"Changer d'animal"},{"txt" :"Healing Wave"},{"txt":"Petit bâton de serpent"},{"txt":"Tous invincibles"}]},{"txt":"Description du héros", "menu":[{"txt ":"Héros d'agilité"},{"txt":"Magie puissante"},{"txt":"Héros auxiliaire"}]}]}]},{"txt":"Morts-vivants","menu":[ {"txt": "Chevalier de la mort", "menu":[{"txt": "Compétences du chevalier de la mort", "menu": [{txt:" Shit Tutu"}, {txt: "Evil Aura"},{ txt:"Contrat de mort"},{txt:"Résurrection des morts-vivants"}]},{"txt":"Description du héros","menu":[{txt:"Monter c'est un mouton"},{txt: "Vieillissement prématuré"},{txt:"Frostmourne"},{txt:"Ah Seth"}]}]},{"txt":"Liche" ,"menu":[{"txt":"Compétences de liche" ,"menu":[{txt:"Ice"},{txt:"Ice Armor"},{txt:"Contract"},{txt :"Death and Decay"}]},{"txt":"Héros Description","menu":[{txt:"Porter une jupe"},{txt:"Tous les os"},{txt:"Pas un homme, pas un homme Femme"}]}]},{"txt" :"Dread Lord","menu":[{"txt":"Compétences démoniaques"},{"txt":"Description du héros"}]},{"txt ":"Prince Xiaoqiang","menu":[ {"txt": "Compétences du prince"}, {"txt": "Description du héros"}]}]}];
new Selects($('demo1'),data,["race","hero"]);
new Selects($('demo2'),data,["race","hero","introduction"]);
new Selects($('demo3'),data,["race","hero","introduction","compétences"]);
new Selects($('demo4'),data,["race","hero","introduction","compétence","description de la compétence"]);
>