js实现简单的联动菜单效果
作者：企鹅 时间：2024-04-19 09:54:45
本文实例讲述了js实现简单的联动菜单效果。分享给大家供大家参考。具体如下：
这是一个最简单的js联动菜单代码，在DW里可以自动生成，不想在DW里生成的话，把此份代码拷贝下拉修改也可以。网页上常用到一种Select联动菜单。
运行效果截图如下：
在线演示地址如下：
http://demo.aspxhome.com/js/2015/js-select-ld-menu-codes/
具体代码如下：
<html>
<head>
<title>简单的Select联动菜单代码</title>
</head>
<body>
<FORM name="F1">
<SELECT NAME="select1" onChange="set_list(this.options.selectedIndex)">
<OPTION SELECTED>流行音乐</OPTION>
<OPTION>网上书籍</OPTION>
<OPTION>软件下载</OPTION>
</SELECT>
<SELECT NAME="select2" >
<OPTION SELECTED>请选网站</OPTION>
</SELECT>
<SCRIPT LANGUAGE="JavaScript">
var l=document.F1.select1.options.length;
//取得第一下拉菜单的选项数目
var group=new Array(l)
//根据这个数目创建数组
for (i=0; i<l; i++)
//上一个数组的每一个元素也是数组
group[i]=new Array()
//接下来创建选项，为第二下拉菜单定义内容
group[0][0]=new Option("CNTV","http://www.cntv.cn")
group[0][1]=new Option("音乐天堂","#")
group[0][2]=new Option("搜狗音乐","http://mp3.sogou.com/")
group[1][0]=new Option("网页特效","/jscss")
group[1][1]=new Option("白鹿书院","http://www.readlink.net")
group[2][0]=new Option("华军软件园","http://www.newhua.com")
group[2][1]=new Option("搜狐下载 ","http://it.sohu.com/download/")
group[2][2]=new Option("中国下载","http://www.download.com.cn")
var selobj=document.F1.select2; //设定需要动态改变的对象是第二下拉菜单
function set_list(x) //x表示第一菜单被选定的内容
{
for (m=selobj.options.length-1;m>0;m--) //先清除第二菜单的选项
selobj.options[m]=null
for (i=0;i<group[x].length;i++){
//根据第一菜单的选定序号，丛控件数组中提取菜单选项放进第二菜单
selobj.options[i]=group[x][i]
//这里也可以创建新的对象，例如：selobj.options[i]=new Option(group[x][i].text,group[x][i].value)
}
selobj.options[0].selected=true
//选定第0号选项
}
function go(){
//这个函数用来将窗口导航到指定的URL
location=selobj.options[selobj.selectedIndex].value
}
</SCRIPT>
</FORM>
<p><INPUT TYPE="BUTTON" NAME="Button" VALUE="go" onclick="go()" style="background-color: #FFFFFF; float: left; font-family: Arial Black; font-size: 10pt; font-weight: bold; text-decoration: blink; color: #000000; font-style: italic; border-style: solid; border-width: 1"></p>
<p></p>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
标签：js,联动菜单
0
投稿猜你喜欢
Python数组变形的几种实现方法
2021-08-20 09:30:47
微信公众平台开发教程（四） 实例入门：机器人回复(附源码)
2024-04-30 08:46:35
jsp/javascript打印九九乘法表代码
2024-03-23 02:23:17
python实现TCP服务器端与客户端的方法详解
2023-05-17 09:39:39
读写json中文ASCII乱码问题的解决方法
2023-02-13 02:32:25
pandas将list数据拆分成行或列的实现
2023-12-23 01:58:41
Mysql事务中Update是否会锁表？
2024-01-14 19:11:33
python获取txt文件词向量过程详解
2021-07-27 12:54:35
浅谈图表参数化设计
2010-08-29 18:03:00
在MySQL中使用Sphinx实现多线程搜索的方法
2024-01-22 17:25:45
thinkPHP框架实现类似java过滤器的简单方法示例
2023-11-22 12:24:47
开发Web应用程序的结构化过程
2009-06-01 10:52:00
mysql查询一天，查询一周，查询一个月的数据
2011-01-29 16:22:00
linux环境搭建图数据库neo4j的讲解
2024-01-16 22:55:31
Python的进程间通信详解
2021-07-16 16:11:25
前端如何用post的方式进行eventSource请求
2024-04-10 16:13:32
用python将word文档合并实例代码
2021-08-13 06:17:01
增强网站的魅力 网页制作技巧三则
2007-10-04 10:06:00
mysql数据库优化需要遵守的原则
2024-01-15 13:54:29
本地存储localStorage用法详解
2024-04-30 10:09:11