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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
浅析vue数据绑定
Jan 17 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
angular组件间通讯的实现方法示例
May 07 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
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
javascript判断office版本示例
2014/04/11 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
低版本中Python除法运算小技巧
2015/04/05 Python
Python文件去除注释的方法
2015/05/25 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
C#公司笔试题
2014/03/28 面试题
大学优秀班主任事迹材料
2014/05/02 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
个人融资协议书
2014/10/02 职场文书
国庆节标语大全
2014/10/08 职场文书
python中%格式表达式实例用法
2021/06/18 Python