<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>试试</title>
<style type="text/css">
* {
font-size: 12px;
font-family: "courier new";
}
select {
width: 120px;
}
</style>
</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 = [];
objobj = 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>
<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>
