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

2019-11-20 11:48:00

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.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(){//这个函数用来将窗口导航到指定的URLlocation=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程序设计有所帮助。

上一篇：easyui Droppable组件实现放置特效

下一篇：javascript 使用for循环时该注意的问题-附问题总结