三层联动选择框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>sample</title>
</head>
<body>
<select id="ddlGameName" onChange="game_onchange_callback(this.options.value)"></select>
<select id="ddlArea" onChange="area_onchange_callback(this.options.value)"></select><select id="ddlServer"></select>
<script language="javascript">
<!--
function Hashtable() {
this._hash = new Object();
//add()
this.add = function(key,value){
if(typeof(key)!="undefined"){
if(this.contains(key)==false){
this._hash[key]=typeof(value)=="undefined"?null:value;
return true;
} else {
return false;
}
} else {
return false;
}
}
//remove()
this.remove = function(key){delete this._hash[key];}
//count
this.count = function(){var i=0;for(var k in this._hash){i++;} return i;}
//items
this.items = function(key){return this._hash[key];}
//contains
this.contains = function(key){ return typeof(this._hash[key])!="undefined";}
//clear
this.clear = function(){for(var k in this._hash){delete this._hash[k];}}
}
var gameString = "--请选择--|,挑战|挑战;1,EVE|EVE;2,魔兽世界|魔兽世界;3,其它游戏|其它游戏;0";
var gameArray = gameString.split(',');
var areaHT = new Hashtable();
areaHT.add("1","--请选择--,上海电信一,上海电信二,绿色网通一");
areaHT.add("2","--请选择--,电信");
areaHT.add("3","--请选择--,世界一,世界二");
var serverHT = new Hashtable();
serverHT.add("1上海电信一","一线,二线,三线");
serverHT.add("1上海电信二","一线,二线");
serverHT.add("1绿色网通一","一线");
serverHT.add("2电信","1");
serverHT.add("3世界一","1,2,3,4,5,6");
serverHT.add("3世界二","1,2,3,4");
var gameObjID = "ddlGameName";
var areaObjID = "ddlArea";
var serverObjID = "ddlServer";
function GetNameFromString(str)
{
return str.split('|')[0];
}
function GetIDFromString(str)
{
return str.split('|')[1];
}
function GetObjectById(objID)
{
return document.getElementById(objID);
}
function ClearList(objID)
{
GetObjectById(objID).options.length = 0;
GetObjectById(objID).options[0] = new Option("", "");
}
function game_onchange_callback(val)
{
if (val == "" || val.split(';')[1] == "0") {
ClearList(areaObjID);
ClearList(serverObjID);
return;
}
InitArea(val.split(';')[1]);
ClearList(serverObjID);
}
function area_onchange_callback(val)
{
if (val == "--请选择--") {
ClearList(serverObjID);
return;
}
InitServer(val);
}
function InitGame()
{
GetObjectById(gameObjID).options.length = 0;
for (var i=0; i<gameArray.length; ++i)
{
gameStr = gameArray[i];
GetObjectById(gameObjID).options[i] = new Option(GetNameFromString(gameStr), GetIDFromString(gameStr));
}
}
function InitArea(gameID)
{
var ary = areaHT.items(gameID).split(',');
GetObjectById(areaObjID).options.length = 0;
for (var i=0; i<ary.length; ++i)
{
str = ary[i];
GetObjectById(areaObjID).options[i] = new Option(str, str);
}
}
function InitServer(areaName)
{
var gameObj = GetObjectById(gameObjID);
var complexID = gameObj.options[gameObj.options.selectedIndex].value.split(';')[1] + areaName;
var ary = serverHT.items(complexID).split(',');
GetObjectById(serverObjID).options.length = 0;
for (var i=0; i<ary.length; ++i)
{
str = ary[i];
GetObjectById(serverObjID).options[i] = new Option(str, str);
}
}
InitGame();
//-->
</script>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>sample</title>
</head>
<body>
<select id="ddlGameName" onChange="game_onchange_callback(this.options.value)"></select>
<select id="ddlArea" onChange="area_onchange_callback(this.options.value)"></select><select id="ddlServer"></select>
<script language="javascript">
<!--
function Hashtable() {
this._hash = new Object();
//add()
this.add = function(key,value){
if(typeof(key)!="undefined"){
if(this.contains(key)==false){
this._hash[key]=typeof(value)=="undefined"?null:value;
return true;
} else {
return false;
}
} else {
return false;
}
}
//remove()
this.remove = function(key){delete this._hash[key];}
//count
this.count = function(){var i=0;for(var k in this._hash){i++;} return i;}
//items
this.items = function(key){return this._hash[key];}
//contains
this.contains = function(key){ return typeof(this._hash[key])!="undefined";}
//clear
this.clear = function(){for(var k in this._hash){delete this._hash[k];}}
}
var gameString = "--请选择--|,挑战|挑战;1,EVE|EVE;2,魔兽世界|魔兽世界;3,其它游戏|其它游戏;0";
var gameArray = gameString.split(',');
var areaHT = new Hashtable();
areaHT.add("1","--请选择--,上海电信一,上海电信二,绿色网通一");
areaHT.add("2","--请选择--,电信");
areaHT.add("3","--请选择--,世界一,世界二");
var serverHT = new Hashtable();
serverHT.add("1上海电信一","一线,二线,三线");
serverHT.add("1上海电信二","一线,二线");
serverHT.add("1绿色网通一","一线");
serverHT.add("2电信","1");
serverHT.add("3世界一","1,2,3,4,5,6");
serverHT.add("3世界二","1,2,3,4");
var gameObjID = "ddlGameName";
var areaObjID = "ddlArea";
var serverObjID = "ddlServer";
function GetNameFromString(str)
{
return str.split('|')[0];
}
function GetIDFromString(str)
{
return str.split('|')[1];
}
function GetObjectById(objID)
{
return document.getElementById(objID);
}
function ClearList(objID)
{
GetObjectById(objID).options.length = 0;
GetObjectById(objID).options[0] = new Option("", "");
}
function game_onchange_callback(val)
{
if (val == "" || val.split(';')[1] == "0") {
ClearList(areaObjID);
ClearList(serverObjID);
return;
}
InitArea(val.split(';')[1]);
ClearList(serverObjID);
}
function area_onchange_callback(val)
{
if (val == "--请选择--") {
ClearList(serverObjID);
return;
}
InitServer(val);
}
function InitGame()
{
GetObjectById(gameObjID).options.length = 0;
for (var i=0; i<gameArray.length; ++i)
{
gameStr = gameArray[i];
GetObjectById(gameObjID).options[i] = new Option(GetNameFromString(gameStr), GetIDFromString(gameStr));
}
}
function InitArea(gameID)
{
var ary = areaHT.items(gameID).split(',');
GetObjectById(areaObjID).options.length = 0;
for (var i=0; i<ary.length; ++i)
{
str = ary[i];
GetObjectById(areaObjID).options[i] = new Option(str, str);
}
}
function InitServer(areaName)
{
var gameObj = GetObjectById(gameObjID);
var complexID = gameObj.options[gameObj.options.selectedIndex].value.split(';')[1] + areaName;
var ary = serverHT.items(complexID).split(',');
GetObjectById(serverObjID).options.length = 0;
for (var i=0; i<ary.length; ++i)
{
str = ary[i];
GetObjectById(serverObjID).options[i] = new Option(str, str);
}
}
InitGame();
//-->
</script>
</body>
</html>
