javascript实现无限级select联动菜单

网络编程 2024/11/19 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

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

奉上代码：

复制代码代码如下:
<!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.]+)/)"BackgroundImageCache", false, true);
function $(Id){
  return document.getElementById(Id);
};
function $$(p,e){
  return p.getElementsByTagName(e);
};
function addListener(element,e,fn){
  element.addEventListener"on" + e,fn);
};
function removeListener(element,e,fn){
  element.removeEventListener"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') "　" + 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,select,联动菜单

标签：

javascript,select,联动菜单

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“javascript实现无限级select联动菜单”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

javascript实现无限级select联动菜单

javascript,select,联动菜单

分享一则javascript 调试技巧

javascript实现表格排序编辑拖拽缩放

评论“javascript实现无限级select联动菜单”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接

javascript实现无限级select联动菜单

javascript,select,联动菜单

分享一则javascript 调试技巧

javascript实现表格排序 编辑 拖拽 缩放

评论“javascript实现无限级select联动菜单”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接

javascript实现表格排序编辑拖拽缩放