html文件：
<!DOCTYPE html>
<html>
<head>
< http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
< >RunJS</ >
</head>
<body>
<form name=\"form1\" method=\"post\">
<SELECT ID=\"x1\" NAME=\"x1\" >
<OPTION selected></OPTION>
</SELECT>
<SELECT ID=\"x2\" NAME=\"x2\" >
<OPTION selected></OPTION>
</SELECT>
<SELECT ID=\"x3\" NAME=\"x3\">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID=\"x4\" NAME=\"x4\">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID=\"x5\" NAME=\"x5\">
<OPTION selected></OPTION>
</SELECT>
</form>
</body>
</html>
css文件：
button{
border:1px solid #ccc;
cursor:pointer;
display:block;
margin:auto;
position:relative;
top:100px;
}
JS文件：
/*
** ====================================
** 类名：CLASS_LIANDONG_YAO
** 功能：多级连动菜单
** 作者：YAODAYIZI
**/
function CLASS_LIANDONG_YAO(array)
{
//数组，联动的数据源
this.array=array;
this.indexName=\'\';
this.obj=\'\';
//设置子SELECT
// 参数：当前 的SELECT ID，要设置的SELECT ID
this.subSelectChange=function(selectName1,selectName2)
{
//try
//{
var obj1=document.all[selectName1];
var obj2=document.all[selectName2];
var objName=this.toString();
var me=this;
obj1. =function()
{
me.opti (this.options[this.selectedIndex].value,obj2.id)
}
}
//设置第一个SELECT
// 参数：indexName指选中项,selectName指select的ID
this.firstSelectChange=function(indexName,selectName)
{
this.obj=document.all[selectName];
this.indexName=indexName;
this.opti (this.indexName,this.obj.id)
}
// indexName指选中项,selectName指select的ID
this.opti =function (indexName,selectName)
{
var obj1=document.all[selectName];
var me=this;
obj1.length=0;
obj1.options[0]=new Option(\"请选择\",\'\');
for(var i=0;i<this.array.length;i++)
{
if(this.array[i][1]==indexName)
{
//alert(this.array[i][1]+\" \"+indexName);
obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
}
}
}
}
//例子2-------------------------------------------------------------
//数据源
var array2=new Array();//数据格式 ID，父级ID，名称
array2[0]=new Array(\"测试测试\",\"根目录\",\"测试测试\");
array2[1]=new Array(\"华北地区\",\"根目录\",\"华北地区\");
array2[2]=new Array(\"上海\",\"测试测试\",\"上海\");
array2[3]=new Array(\"广东\",\"测试测试\",\"广东\");
array2[4]=new Array(\"徐家汇\",\"上海\",\"徐家汇\");
array2[5]=new Array(\"普托\",\"上海\",\"普托\");
array2[6]=new Array(\"广州\",\"广东\",\"广州\");
array2[7]=new Array(\"湛江\",\"广东\",\"湛江\");
array2[8]=new Array(\"不知道\",\"湛江\",\"不知道\");
array2[9]=new Array(\"5555\",\"湛江\",\"555\");
array2[10]=new Array(\"++++\",\"不知道\",\"++++\");
array2[11]=new Array(\"111\",\"徐家汇\",\"111\");
array2[12]=new Array(\"222\",\"111\",\"222\");
array2[13]=new Array(\"333\",\"222\",\"333\");
//--------------------------------------------
//这是调用代码
//设置数据源
var liandong2=new CLASS_LIANDONG_YAO(array2);
//设置第一个选择框
liandong2.firstSelectChange(\"根目录\",\"x1\");
//设置子选择框
liandong2.subSelectChange(\"x1\",\"x2\")
liandong2.subSelectChange(\"x2\",\"x3\")
liandong2.subSelectChange(\"x3\",\"x4\")
liandong2.subSelectChange(\"x4\",\"x5\") 继续阅读与本文标签相同的文章
-
ITSS到底是什么？与ISO20000关系是什么样的？
2026-05-15栏目： 教程
-
数据库查询，你还在 Select×吗？
2026-05-15栏目： 教程
-
浅谈企业 DevSecOps 实践：基本原则
2026-05-15栏目： 教程
-
媒体大脑亮相宁夏中卫 AI助力媒体融合
2026-05-15栏目： 教程
-
Python 3.8 已发布，那如何编译和调试最新的内核源码呢？
2026-05-15栏目： 教程