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