JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动


Posted in Javascript onJune 29, 2010

html代码

<html> 
<head> 
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> 
<title>试试</title> 
</head> 
<script type="text/javascript"> 
var data = { 
'1' : 'a001', 
'2' : 'a002', 
'3' : 'a003', 
'4' : 'a004', 
'5' : 'a005', 
'6' : 'a006' 
}; 
var data2 = { 
'1' : { '101' : 'a101', '102' : 'a102', '103' : 'a103', '104' : 'a104' }, 
'2' : { '201' : 'a201', '202' : 'a202', '203' : 'a203', '204' : 'a204' }, 
'3' : { '301' : 'a301', '302' : 'a302', '303' : 'a303', '304' : 'a304' }, 
'4' : { '401' : 'a401', '402' : 'a402', '403' : 'a403', '404' : 'a404' }, 
'5' : { '501' : 'a501', '502' : 'a502', '503' : 'a503', '504' : 'a504' }, 
'6' : { '601' : 'a601', '602' : 'a602', '603' : 'a603', '604' : 'a604' }, 
'101' : { '10101' : 'a10101', '10102' : 'a10102', '10103' : 'a10103', '10104' : 'a10104' }, 
'102' : { '10201' : 'a10201', '10202' : 'a10202', '10203' : 'a10203', '10204' : 'a10204' }, 
'103' : { '10301' : 'a10301', '10302' : 'a10302', '10303' : 'a10303', '10304' : 'a10304' }, 
'104' : { '10401' : 'a10401', '10402' : 'a10402', '10403' : 'a10403', '10404' : 'a10404' }, 
'201' : { '20101' : 'a20101', '20102' : 'a20102', '20103' : 'a20103', '20104' : 'a20104' }, 
'202' : { '20201' : 'a20201', '20202' : 'a20202', '20203' : 'a20203', '20204' : 'a20204' }, 
'203' : { '20301' : 'a20301', '20302' : 'a20302', '20303' : 'a20303', '20304' : 'a20304' }, 
'204' : { '20401' : 'a20401', '20402' : 'a20402', '20403' : 'a20403', '20404' : 'a20404' }, 
'301' : { '30101' : 'a30101', '30102' : 'a30102', '30103' : 'a30103', '30104' : 'a30104' }, 
'302' : { '30201' : 'a30201', '30202' : 'a30202', '30203' : 'a30203', '30204' : 'a30204' }, 
'303' : { '30301' : 'a30301', '30302' : 'a30302', '30303' : 'a30303', '30304' : 'a30304' }, 
'304' : { '30401' : 'a30401', '30402' : 'a30402', '30403' : 'a30403', '30404' : 'a30404' }, 
'401' : { '40101' : 'a40101', '40102' : 'a40102', '40103' : 'a40103', '40104' : 'a40104' }, 
'402' : { '40201' : 'a40201', '40202' : 'a40202', '40203' : 'a40203', '40204' : 'a40204' }, 
'403' : { '40301' : 'a40301', '40302' : 'a40302', '40303' : 'a40303', '40304' : 'a40304' }, 
'404' : { '40401' : 'a40401', '40402' : 'a40402', '40403' : 'a40403', '40404' : 'a40404' }, 
'501' : { '50101' : 'a50101', '50102' : 'a50102', '50103' : 'a50103', '50104' : 'a50104' }, 
'502' : { '50201' : 'a50201', '50202' : 'a50202', '50203' : 'a50203', '50204' : 'a50204' }, 
'503' : { '50301' : 'a50301', '50302' : 'a50302', '50303' : 'a50303', '50304' : 'a50304' }, 
'504' : { '50401' : 'a50401', '50402' : 'a50402', '50403' : 'a50403', '50404' : 'a50404' }, 
'601' : { '60101' : 'a60101', '60102' : 'a60102', '60103' : 'a60103', '60104' : 'a60104' }, 
'602' : { '60201' : 'a60201', '60202' : 'a60202', '60203' : 'a60203', '60204' : 'a60204' }, 
'603' : { '60301' : 'a60301', '60302' : 'a60302', '60303' : 'a60303', '60304' : 'a60304' }, 
'604' : { '60401' : 'a60401', '60402' : 'a60402', '60403' : 'a60403', '60404' : 'a60404' } 
}; 
window.$ = function(id) { 
if(typeof id == 'string') { 
return document.getElementById(id); 
} 
return id; 
} 
/** 
* 事件处理工具类 
* 
* @author bao110908 
*/ 
var Event = function(){} 
Event = { 
/** 
* 为 element 使用 handler 处理程序添加至 event 事件 
* 兼容 IE 及 Firefox 等浏览器 
* 
* 例如为 botton 对象添加 onclick 事件,使用 clickEvent 
* 方法作为处理程序: 
* Event.addEvent(botton, 'click', clickEvent); 
* 
* @param element 需要添加事件的对象(Object) 
* @param event 需要添加的事件名称(String),不加“on” 
* @param handler 需要添加的方法引用(Function) 
*/ 
addEvent : function(element, event, handler) { 
if(element.attachEvent) { 
element.attachEvent('on' + event, handler); 
} else if (element.addEventListener) { 
element.addEventListener(event, handler, false); 
} else { 
element['on' + event] = handler; 
} 
}, 
/** 
* 添加事件处理程序时,只能添加一个方法的引用,并不能给 
* 方法加上参数。比如定义了 clickEvent(str) 这个方法,现 
* 在要将其作为 obj 的 onclick 的事件处理程序,就可以用: 
* obj.onclick = Event.getFuntion(null, clickEvent, str); 
*/ 
getFunction : function(obj, fun) { 
var args = []; 
obj = obj || window; 
for(var i = 2; i < arguments.length; i++) { 
args.push(arguments[i]); 
} 
return function() { 
fun.apply(obj, args); 
}; 
} 
} 
/** 
* 联动处理类 
* 
* @param first 第一个 select 的 ID 
* @param second 第二个 select 的 ID 
* @param dataSet 第二个 select 的数据 
* 
* @author bao110908 
*/ 
var Linkage = function(first, second) { 
this.first = $(first); 
this.second = $(second); 
} 
/** 
* 初始化第一个 select 的数据 
*/ 
Linkage.initFirst = function(first, dataSet) { 
var base = $(first); 
base.options.length = 1; 
for(var k in dataSet) { 
var opt = new Option(dataSet[k], k); 
base.options[base.options.length] = opt; 
} 
} 
Linkage.prototype = { 
// 初始化 
init : function() { 
this.addOnChange(); 
}, 
// 为第一个 select 添加 onchange 事件 
addOnChange : function() { 
Event.addEvent(this.first, 'change', Event.getFunction(this, this._onChangeEvent)); 
}, 
// onchange 事件处理 
_onChangeEvent : function() { 
this._defaultSelect(); 
var data = this._getData(this.first.value); 
if(!data) { 
return; 
} 
this.second.options.length = 1; 
for(var k in data) { 
var opt = new Option(data[k], k); 
this.second.options[this.second.options.length] = opt; 
} 
}, 
// 获取数据,如果采用 Ajax 方式,需要进行更改 
// Ajax 应返回 { '101' : {'101' : 'a101', '102', 'a102' }} 这样的数据格式 
// 然后再使用 eval('(' + ajaxData + ')'); 转为 JSON 对象 
_getData : function(value) { 
return data2[value]; 
}, 
// 重新选择时的处理 
_defaultSelect : function() { 
this.second.selectedIndex = 0; 
this.second.options.length = 1; 
if(this.second.fireEvent) { 
// IE 
this.second.fireEvent('onchange'); 
} else { 
// DOM 2 
var event = document.createEvent('HTMLEvents'); 
event.initEvent('change', false, true); 
this.second.dispatchEvent(event); 
} 
} 
} 
window.onload = function() { 
Linkage.initFirst('base1', data); 
var one = new Linkage('base1', 'base2'); 
one.init(); 
var two = new Linkage('base2', 'base3'); 
two.init(); 
} 
</script> 
<style type="text/css"> 
* { 
font-size: 12px; 
font-family: "courier new"; 
} 
select { 
width: 120px; 
} 
</style> 
<body> 
一级:<select name="base1" id="base1"><option value="0">-- 请选择 --</option></select> 
  
二级:<select name="base2" id="base2"><option value="0">-- 请选择 --</option></select> 
  
三级:<select name="base3" id="base3"><option value="0">-- 请选择 --</option></select> 
</body> 
</html>

Js代码
var one = new Linkage('base1', 'base2', data2); 
one.init(); 
var two = new Linkage('base2', 'base3', data3); 
two.init(); 
//每增加一级联动,就要 new 一下就可以了
Javascript 相关文章推荐
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 #Javascript
javascript hasFocus使用实例
Jun 29 #Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 #Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 #Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 #Javascript
Jquery ui css framework
Jun 28 #Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 #Javascript
You might like
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
详解django2中关于时间处理策略
2019/03/06 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
市场推广策划方案
2014/06/02 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书