三层联动选择框
<!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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现