编程 Javascript

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 联动的无限级封装类,数据采用非Ajax方式,随意添加联动

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js hover 定时器(实例代码)

Nov 12 Javascript

详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)

Oct 01 Javascript

JavaScript在网页中画圆的函数arc使用方法

Nov 13 Javascript

6种javascript显示当前系统时间代码

Dec 01 Javascript

浅谈Node.js：理解stream

Dec 08 Javascript

使用原生js封装的ajax实例(兼容jsonp)

Oct 12 Javascript

分析javascript原型及原型链

Mar 18 Javascript

js实现文件上传功能后台使用MultipartFile

Sep 08 Javascript

详解从react转职到vue开发的项目准备

Jan 14 Javascript

VUE简单的定时器实时刷新的实现方法

Jan 20 Javascript

JavaScript之数组扁平化详解

Jun 03 Javascript

vue element和nuxt的使用技巧分享

Jan 14 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