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 相关文章推荐
Javascript模块模式分析
May 16 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
基于vue实现分页效果
Nov 06 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 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脚本数据库功能详解(上)
2006/10/09 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Python collections模块实例讲解
2014/04/07 Python
python实现文件快照加密保护的方法
2015/06/30 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
解决python flask中config配置管理的问题
2019/07/26 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
sort命令的作用和用法
2012/11/04 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
刘胡兰的英雄事迹材料
2014/02/11 职场文书
职位说明书范文
2014/05/07 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
维稳工作承诺书
2015/01/20 职场文书
学年个人总结范文
2015/03/05 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书