JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
作者：
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
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 一下就可以了
复制代码 代码如下:
<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 一下就可以了