javascript实现无限级select联动菜单


Posted in Javascript onJanuary 02, 2015

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

奉上代码:

<!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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
js如何获取网页所有图片
May 12 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
详解javascript函数写法大全
Mar 25 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 #Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 #Javascript
javascript使用smipleChart实现简单图表
Jan 02 #Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 #Javascript
浅谈jQuery事件绑定原理
Jan 02 #Javascript
js+jquery实现图片裁剪功能
Jan 02 #Javascript
javascript 构造函数方式定义对象
Jan 02 #Javascript
You might like
php Smarty模板生成html文档的方法
2010/04/12 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
Javascript中的数学函数
2007/04/04 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
带你了解python装饰器
2017/06/15 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python3 求约数的实例
2019/12/05 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
小学教师管理制度
2014/01/18 职场文书
车辆年审委托书范本
2014/09/18 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS