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绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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如何统计Nginx日志的User Agent数据
2019/03/06 PHP
YII框架常用技巧总结
2019/04/27 PHP
newxtree.js代码
2007/03/13 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
解决pycharm界面不能显示中文的问题
2018/05/23 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python离线安装外部依赖包的实现
2020/02/13 Python
基于python实现计算两组数据P值
2020/07/10 Python
Weblogic和WebSphere不同特点
2012/05/09 面试题
会议开场欢迎词
2014/01/15 职场文书
授权委托书范本
2014/04/03 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2014年公务员工作总结
2014/11/18 职场文书
2014全年工作总结
2014/11/27 职场文书
地陪导游欢迎词
2015/01/26 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书