转：适有修改并调试OK
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);
function sID(Id)
{
return document.getElementById(Id);
};
function sName(p, e) {
return p.getElementsByTagName(e);
};
function addListener(element, e,
fn) {
element.addEventListener ? element.addEventListener(e, fn, false) :
element.attachEvent("on" + e, fn);
};
function removeListener(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];
};
};
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({
initialize: function
(container, data, title) {
this.container = container;
this.num = title.length;
this.Events = new Array(title.length -
1);
var i, l, select;
for (i = 0; i < this.num; i++)
{
container.innerHTML = container.innerHTML + " " + title[i];
container.appendChild(document.createElement(‘select‘));
}
select = sName(container, ‘select‘)[0];
for (i = 0, l =
data.length; i < l; i++)
select.options.add(new
Option(data[i].txt, data[i].value + ‘@‘ + i));
addListener(select,
‘change‘, Bind(this, this.Change, select, data, 0));
this.Change(select, data, 0);
},
Change: function (obj, data, num)
{
if (num == this.num - 1) return;
var valuestr =
obj.value;
alert(valuestr);
var svalue =
this.getValue(valuestr);
alert(svalue);
var menu =
data[svalue].menu;
select = sName(this.container, ‘select‘)[num +
1];
select.length = 0;
if (!menu) return;
if
(this.Events[num] != undefined) removeListener(select, ‘change‘,
this.Events[num])
this.Events[num] = Bind(this, this.Change, select,
menu, num + 1)
addListener(select, ‘change‘, this.Events[num]);
for (var i = 0, l = menu.length; i < l; i++)
select.options.add(new Option(menu[i].txt, i));
this.Change(select,
menu, num + 1);
},
getValue: function (value) {
var
tmpcnt = value.indexOf(‘@‘);
alert(tmpcnt);
var resultstr
= value.substring(tmpcnt+1, value.length);
alert(resultstr);
return resultstr;
}
});
//=================
window.onload =
function () {
var data = [{ "txt": "人族", "value": "x001", "menu": [{
"txt": "大法师", "value": "x002", "menu": [{ "txt": "大法技能", "value": "x003",
"menu": [{ "txt": "水元素", "value": "x004", "menu": [{ "txt": "召唤物", "value":
"x005" }, { "txt": "穿刺攻击", "value": "x006" }, { "txt": "很好东西", "value": "x007"}]
}, { "txt": "暴风雪", "value": "x001", "menu": [{ "txt": "魔法攻击", "value": "x001" },
{ "txt": "面积伤害", "value": "x001" }, { "txt": "很漂亮", "value": "x001" }, { "txt":
"可被打断", "value": "x001"}] }, { "txt": "辉煌光环", "value": "x001" }, { "txt":
"瞬间移动", "value": "x001"}] }, { "txt": "英雄说明","value": "x001", "menu": [{ "txt":
"智力英雄" }, { "txt": "强大光环" }, { "txt": "辅助型" }, ]}] }, { "txt": "山丘之王", "menu":
[{ "txt": "山丘技能","value": "x001", "menu": [{ "txt": "风暴之锤" }, { "txt": "锥地" }, {
"txt": "锥晕" }, { "txt": "天神下凡"}] }, { "txt": "英雄说明","value": "x001", "menu": [{
"txt": "力量英雄" }, { "txt": "秒杀能力" }, { "txt": "个子很矮" }, { "txt": "大技变态"}]}] }, {
"txt": "圣骑士","value": "x001", "menu": [{ "txt": "圣骑技能","value": "x001", "menu":
[{ "txt": "光" }, { "txt": "无敌" }, { "txt": "光环" }, { "txt": "复活"}] }, { "txt":
"英雄说明","value": "x001", "menu": [{ "txt": "力量英雄" }, { "txt": "辅助英雄" }, { "txt":
"人称奶妈"}]}] }, { "txt": "血法师","value": "x001", "menu": [{ "txt": "血法技能", "menu":
[{ "txt": "火焰" }, { "txt": "吸蓝" }, { "txt": "虚无" }, { "txt": "神鸟凤凰"}] }, {
"txt": "英雄说明", "menu": [{ "txt": "智力英雄" }, { "txt": "辅助英雄" }, { "txt":
"长的很帅"}]}]}] }, { "txt": "兽族", "menu": [{ "txt": "贱圣", "menu": [{ "txt": "贱圣技能",
"menu": [{ "txt": "疾风步" }, { "txt": "影分身" }, { "txt": "致命一击" }, { "txt":
"剑刃风暴"}] }, { "txt": "英雄说明", "menu": [{ "txt": "敏捷英雄" }, { "txt": "高攻英雄" }, {
"txt": "杀人越货" }, { "txt": "猥亵无敌" }, { "txt": "非常强大"}]}] }, { "txt": "先知男",
"menu": [{ "txt": "先知技能", "menu": [{ "txt": "狼" }, { "txt": "日" }, { "txt":
"闪电链" }, { "txt": "地震"}] }, { "txt": "英雄说明", "menu": [{ "txt": "智力英雄" }, {
"txt": "骚扰英雄"}]}] }, { "txt": "牛头人酋长", "menu": [{ "txt": "牛头技能", "menu": [{
"txt": "冲击波" }, { "txt": "阵地" }, { "txt": "耐久光环" }, { "txt": "复活"}] }, { "txt":
"英雄说明", "menu": [{ "txt": "力量英雄" }, { "txt": "魔法强大" }, { "txt": "长的威猛" }, {
"txt": "一个肉盾"}]}] }, { "txt": "小YY", "menu": [{ "txt": "小Y技能", "menu": [{ "txt":
"变动物" }, { "txt": "治疗波" }, { "txt": "小蛇棒子" }, { "txt": "全体无敌"}] }, { "txt":
"英雄说明", "menu": [{ "txt": "敏捷英雄" }, { "txt": "魔法强大" }, { "txt": "辅助英雄"}]}]}] },
{ "txt": "不死族", "menu": [{ "txt": "死亡骑士", "menu": [{ "txt": "亡骑技能", "menu": [{
txt: "大便一拓" }, { txt: "邪恶光环" }, { txt: "死亡契约" }, { txt: "复活亡灵"}] }, { "txt":
"英雄说明", "menu": [{ txt: "骑的是羊" }, { txt: "未老先衰" }, { txt: "冰霜之哀" }, { txt:
"啊而塞思"}]}] }, { "txt": "巫妖", "menu": [{ "txt": "巫妖技能", "menu": [{ txt: "暴冰" }, {
txt: "冰甲" }, { txt: "契约" }, { txt: "死亡凋零"}] }, { "txt": "英雄说明", "menu": [{ txt:
"穿裙子" }, { txt: "全是骨头" }, { txt: "不男不女"}]}] }, { "txt": "恐惧魔王", "menu": [{
"txt": "魔王技能" }, { "txt": "英雄说明"}] }, { "txt": "小强王子", "menu": [{ "txt": "王子技能"
}, { "txt": "英雄说明"}]}]}];
new Selects(sID(‘demo1‘), data, ["种族",
"英雄"]);
new Selects(sID(‘demo2‘), data, ["种族", "英雄", "介绍"]);
new
Selects(sID(‘demo3‘), data, ["种族", "英雄", "介绍", "技能"]);
new
Selects(sID(‘demo4‘), data, ["种族", "英雄", "介绍", "技能", "技能说明"]);
}
原文地址：http://www.cnblogs.com/zqmingok/p/3744128.html
