javascript实现无限级select联动菜单

 更新时间:2015年01月02日 11:33:39   转载 投稿:hebedich  
这篇文章主要介绍了javascript实现无限联动菜单的方法和示例,思路非常棒,需要的朋友可以参考下

代码很简单,这里主要是给大家推荐一下本代码的实现思路,别具一格。

奉上代码:

复制代码 代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Selects</title>
<style type="text/css">
*{font-size:14px;}
select{height:20px;font-size:12px;}
</style> 
</head>
<body >
<div style='color:red'>2级联动</div>
<div id='demo1'></div><br><br><br>
<div style='color:red'>3级联动</div>
<div id='demo2'></div><br><br><br>
<div style='color:red'>4级联动</div>
<div id='demo3'></div><br><br><br>
<div style='color:red'>5级联动</div>
<div id='demo4'></div><br><br><br>
<script language="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);
function $(Id){
  return document.getElementById(Id);
};
function $$(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 function(event) {
    return fun.apply(object, [event || window.event].concat(args));
  };
};
var Extend = function(destination, source){
  for (var property in source) {
    destination[property] = source[property];
  };
};
var Class = function(properties){
  var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
  _class.prototype = properties;
  return _class;
};

//==========================================================================================================================
var Selects = new Class({
 initialize :function(container,data,title){
  this.container  = container;
  this.num = title.length;
  this.Events = new Array(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 = $$(container,'select')[0];
  for(i=0,l=data.length;i<l;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);
 },
 Change : 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]!=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(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":"山丘之王","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,["种族","英雄","介绍","技能","技能说明"]);
}
</script>
</body>
</html>


相关文章

  • 详谈JavaScript内存泄漏

    详谈JavaScript内存泄漏

    文章从什么是闭包、以及闭包所涉及的作用域链说起,讲述了JavaScript垃圾回收机制、循环引用、循环引用和闭包、IE中的内存泄漏以及解决方法,是篇非常详尽,非常不错的文章,这里推荐给大家。
    2014-11-11
  • Javascript 实现匿名递归的实例代码

    Javascript 实现匿名递归的实例代码

    本篇文章主要介绍了Javascript 实现匿名递归的实例代码,利用 arguments.callee 来实现匿名递归的方式。有兴趣的可以了解一下
    2017-05-05
  • 用正则获取指定路径文件的名称

    用正则获取指定路径文件的名称

    用正则获取指定路径文件的名称...
    2007-02-02
  • 关于layui的下拉搜索框异步加载数据的解决方法

    关于layui的下拉搜索框异步加载数据的解决方法

    今天小编就为大家分享一篇关于layui的下拉搜索框异步加载数据的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序局部刷新触发整页刷新效果的实现代码

    微信小程序局部刷新触发整页刷新效果的实现代码

    这篇文章主要介绍了微信小程序局部刷新触发整页刷新效果的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • javascript 具名函数的四种调用方式 推荐

    javascript 具名函数的四种调用方式 推荐

    看四种方式执行结果没有区别。但如果函数有返回值的话,用new方式调用时可能会让你有些失望。
    2009-07-07
  • 基于JS实现PHP的sprintf函数实例

    基于JS实现PHP的sprintf函数实例

    这篇文章主要介绍了基于JS实现PHP的sprintf函数的方法,可实现JavaScript模拟PHPsprintf函数的输出功能,涉及JavaScript字符串操作的相关技巧,需要的朋友可以参考下
    2015-11-11
  • JavaScript改变CSS样式的方法汇总

    JavaScript改变CSS样式的方法汇总

    JavaScript修改CSS有4种方法:1.修改节点style(内联样式);2.改变节点class或id;3.写入新的css;4.替换页面中的样式表。今天主要给大家介绍下前2种,因为后两种个人不是很推荐大家使用
    2015-05-05
  • JavaScript触发onScroll事件的函数节流详解

    JavaScript触发onScroll事件的函数节流详解

    这篇文章的内容是说说最近在工作中遇到过的常见的问题。主要是关于JavaScript触发onScroll事件的函数节流,文中由一个常见的问题开始展开,一步步的介绍解决的方法,有需要的朋友们下面来跟着小编一起看看吧。
    2016-12-12
  • 微信小程序实现单选选项卡切换效果

    微信小程序实现单选选项卡切换效果

    这篇文章主要为大家详细介绍了微信小程序实现单选选项卡切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02

最新评论