软件开发培训班 >> 编程开发 >> JavaScript


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 一下就可以了