一个最简单的联动菜单代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<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("源码编程","/")

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>

​x
 
<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>
​

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

一个最简单的联动菜单代码

分类

表单按钮

描述

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