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 相关文章推荐
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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开发负载均衡指南
2010/07/17 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
python根据日期返回星期几的方法
2015/07/06 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
python两种注释用法的示例
2020/10/09 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
毕业生求职推荐信
2013/11/04 职场文书
护士在校生自荐信
2014/02/01 职场文书
销售总经理岗位职责
2014/03/15 职场文书
农业开发项目建议书
2014/05/16 职场文书
某某同志考察材料
2014/05/28 职场文书
2015新年寄语大全
2014/12/08 职场文书
合作合同协议书范本
2015/01/27 职场文书
拉贝日记观后感
2015/06/05 职场文书