js实现简单的联动菜单效果

前端技术 2023/09/05 JavaScript

本文实例讲述了js实现简单的联动菜单效果。分享给大家供大家参考。具体如下：

这是一个最简单的js联动菜单代码，在DW里可以自动生成，不想在DW里生成的话，把此份代码拷贝下拉修改也可以。网页上常用到一种Select联动菜单。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/13570

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案