<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Selects</title>
<style type="text/css">
*{font-size:14px;}
select{height:20px;font-size:12px;}
</style>
</head>
<script type="text/javascript">
var $Sys = (function(ua){
var s = {};
s.IE = ua.match(/msie ([\d.]+)/)?true:false;
s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false;
s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false;
s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;
s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;
s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;
return s;
})(navigator.userAgent.toLowerCase());
$Sys.IE6&&document.execCommand("BackgroundImageCache", false, true);
var $EL = function(Id){
return document.getElementById(Id);
};
var $$EL = function(p,e){
return p.getElementsByTagName(e);
};
var $addListener = function(element,e,fn){
element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
};
var $removeListener = function(element,e,fn){
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);
};
var $Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
};
};
var $BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
};
};
var $Extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
};
return destination;
};
var $Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var Selects = new $Class({
defaults: {
label:"- Please choose -",
default_value:"",
separator: ""
},
initialize :function(container, name, data, title){
this.container = container;
this.num = title.length;
this.Events = new Array(title.length-1);
this.name = name;
var opts = typeof arguments[4] !== 'undefined' ? arguments[4] : {};
this.opts = $Extend(this.defaults, opts);
var i,l,select;
for(i=0; i<this.num; i++)
{
container.innerHTML = container.innerHTML + " <label>" + title[i] + ":</label>";
container.appendChild(document.createElement('select'));
container.innerHTML = container.innerHTML + this.opts.separator;
}
var hiddenInput = document.createElement('input');
hiddenInput.name = name;
hiddenInput.type = "hidden";
container.appendChild(hiddenInput);
this.hiddenInput = hiddenInput;
select = $$EL(container,'select')[0];
select.options.add(new Option(this.opts.label, ""));
for(i=0,l=data.length;i<l;i++)
select.options.add(new Option(data[i].text,data[i].value));
$addListener(select,'change',$Bind(this,this.Change,select,data,0));
if(this.opts.default_value != "") {
var paths = this.FindPath(data, this.opts.default_value);
for(var i=0,l=paths.length; i<l; i++) {
select = $$EL(container, 'select')[i];
this.setSelectValue(select, paths[i]);
this.Change(select,data,i);
}
} else {
this.Change(select,data,0);
}
},
Change : function(obj,data,num){
this.hiddenInput.value = obj.value;
if(num == this.num-1)return;
var child = this.Find(data, obj.value).child;
select = $$EL(this.container,'select')[num+1];
select.length = 0;
if(!child)return;
if(this.Events[num]!=undefined) $removeListener(select,'change',this.Events[num]);
this.Events[num] = $Bind(this,this.Change,select,child,num+1);
$addListener(select,'change',this.Events[num]);
select.options.add(new Option(this.opts.label, ""));
for(var i=0,l=child.length;i<l;i++) {
select.options.add(new Option(child[i].text,child[i].value));
}
this.Change(select,child,num+1);
},
Find : function(data, value) {
for(var i=0, l=data.length; i<l; i++) {
if(data[i].value == value) {
return data[i];
}
}
return {};
},
FindPath : function(data, value) {
var pathArr = [];
var result;
for(var i=0, l=data.length; i<l; i++) {
if(data[i].child) {
result = this.FindPath(data[i].child, value);
if(result) {
return [data[i].value].concat(result);
}
}
if(data[i].value == value) {
return [value];
}
}
return false;
},
setSelectValue : function(el, value) {
for(var i=0; i<el.options.length; i++)
{
if(el.options[i].value == value)
{
el.options[i].selected = true;
}
}
}
});
</script>
<body >
<div style='color:red'>2级联动</div>
<div id='demo1'></div>
<script type="text/javascript">
var data = [
{value:5, text:"人族", child:[{value:2, text:"法师"}, {value:6, text:"战士"}]},
{value:3, text:"兽族", child:[{value:4, text:"神鸟凤凰"}]}
];
new Selects($EL('demo1'), "post1", data, ["种族","英雄"], {default_value:6});
</script>
</body>
</html>
