相思资源网 Design By www.200059.com
本文实例讲述了JS简单实现多级Select联动菜单效果代码。分享给大家供大家参考。具体如下：
JS联动菜单，简单代码实现JS多级Select联动菜单，也就是大家常用的一款菜单，Select联动状态的菜单，网页上经常见到的效果，希望大家能用得上。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-simple-select-ld-menu-codes/
具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS联动下拉框</title>
<script language="javascript" >
/*
** ====================================
** 类名：CLASS_LIANDONG_YAO
** 功能：多级连动菜单
** 作者：YAODAYIZI
**/
function CLASS_LIANDONG_YAO(array)
{
//数组，联动的数据源
this.array=array;
this.indexName='';
this.obj='';
//设置子SELECT
// 参数：当前onchange的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.onchange=function()
{
me.optionChange(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.optionChange(this.indexName,this.obj.id)
}
// indexName指选中项,selectName指select的ID
this.optionChange=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]);
}
}
}
}
</script>
</head>
<body>
<form name="form1" method="post">
<SELECT ID="s1" NAME="s1" >
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="s2" NAME="s2" >
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="s3" NAME="s3">
<OPTION selected></OPTION>
</SELECT>
<br>
<br><br>
<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>
<script language="javascript">
//例子1-------------------------------------------------------------
//数据源
var array=new Array();
array[0]=new Array("华南地区","根目录","华南地区"); //数据格式 ID，父级ID，名称
array[1]=new Array("华北地区","根目录","华北地区");
array[2]=new Array("上海","华南地区","上海");
array[3]=new Array("广东","华南地区","广东");
array[4]=new Array("徐家汇","上海","徐家汇");
array[5]=new Array("普托","上海","普托");
array[6]=new Array("广州","广东","广州");
array[7]=new Array("湛江","广东","湛江");
//--------------------------------------------
//这是调用代码
var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源
liandong.firstSelectChange("根目录","s1"); //设置第一个选择框
liandong.subSelectChange("s1","s2"); //设置子级选择框
liandong.subSelectChange("s2","s3");
//例子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")
</script>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
标签：
JS,Select,联动菜单
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无JS简单实现多级Select联动菜单效果代码的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。