4当前位置:网页制作JavaScript教程-三级下拉联动链接菜单
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
4本站推荐内容
4最新网页制作
·点击复制本页网址的…
·新版浏览器实现图片…
·JavaScript拖放效果…
·ajax跨域的三种方法
·浅谈几种常用的嵌套…
·JS控制表格行间色和…
·JavaScript自动判断…
·JS让广告不影响网页…
·JS结合Cookies记录I…
·JS实现页面跳转的五…
4热门网页制作
·网页自动适应客户端…
·JS网页加载进度条
·突破IE屏蔽限制弹出…
·三级下拉联动链接菜单
·文本框控制字数和禁…
·33个JavaScript经典…
·JS获取页面地址栏参数
·JavaScript去除空格…
·又一个全国省市双级…
·全国省市县无刷新多…
4相关网页制作
·JS无限分类算法的实现
·浅谈网页显示日期的…
·利用vbs+js将gb2312…
·表单只能输入英文和…
·显示时间的最简单的…
·JS实现字符排序
·网页播放器参数
·表单只能输入英文
·全面理解JS的caller…
·Javascript经典小教程
三级下拉联动链接菜单
类别:JavaScript教程    来源:网络    时间:2006-5-11    贴士:推荐给好友
收藏本页 8 
完整的代码如下:
<html>
<head>
<title>三级下拉联动链接菜单</title>
<meta http-equiv=content-Type content="text/html;charset=gb2312">
</head>
<body>
<div align="center">
<form name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>◤建站资源网◢</option>
<option>★CGI程序设计</option>
<option>★FLASH欣赏</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">         
<option value=" " selected></option>')         
<option value=" " selected>◤------第二层菜单------◢</option>  
<option value=" " selected>◤------第二层菜单------◢</option>  
</select>   
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">        
<option value=" " selected></option>')         
<option value=" " selected>◤------第三层菜单------◢</option>   
<option value=" " selected>◤------第三层菜单------◢</option>   
</select></table> 
</form></div>   
<script language="JavaScript">
<!--
var groups=document.isc.example.options.length      
var group=new Array(groups)      
for (i=0; i<groups; i++)      
group[i]=new Array()      
      
group[0][0]=new Option("----第二层菜单----"," ");      
      
group[1][0]=new Option("」第一类"," ");      
group[1][1]=new Option("」第二类","47");      
group[1][2]=new Option("」第三类","46");      
group[1][3]=new Option("」第四类","45");      
      
group[2][0]=new Option("」第一类"," ");      
group[2][1]=new Option("」第二类","115");      
group[2][2]=new Option("」第三类","116");       
      
var temp=document.isc.stage2      
         
function redirect(x){      
for (m=temp.options.length-1;m>0;m--)      
temp.options[m]=null      
for (i=0;i<group[x].length;i++){      
temp.options[i]=new Option(group[x][i].text,group[x][i].value)      
}      
temp.options[0].selected=true      
redirect1(0)      
}     

var secondGroups=document.isc.stage2.options.length      
var secondGroup=new Array(groups)      
for (i=0; i<groups; i++)  {      
secondGroup[i]=new Array(group[i].length)      
for (j=0; j<group[i].length; j++)  {      
secondGroup[i][j]=new Array()  }}      
      
secondGroup[0][0][0]=new Option("----第三层菜单----"," ");      
secondGroup[1][0][0]=new Option("----第三层菜单----"," ");      
secondGroup[1][1][0]=new Option("」 第一节"," ");      
secondGroup[1][1][1]=new Option("」 第一节","../cgi/pagenew8.htm");      
secondGroup[1][1][2]=new Option("」 第一节","../cgi/pagenew8.htm");      
secondGroup[1][1][3]=new Option("」 第一节","../explain/route.htm");      
      
secondGroup[1][2][0]=new Option("」第三类"," ");      
secondGroup[1][2][1]=new Option("第二节","../cgi/pagenew7.htm");      
secondGroup[1][2][2]=new Option("第二节","../cgi/pagenew7.htm");      
secondGroup[1][2][3]=new Option("第二节","../explain/route.htm");      
      
secondGroup[1][3][0]=new Option("」第四类"," ");      
secondGroup[1][3][1]=new Option("第三节","../cgi/pagenew15.htm");      
secondGroup[1][3][2]=new Option("第三节","../explain/route.htm");      
      
secondGroup[2][0][0]=new Option("----第三层菜单----"," ");      
secondGroup[2][1][0]=new Option("」第三类"," ");      
secondGroup[2][1][1]=new Option("」第三节(1)","../pictures/cartoon/1.htm");      
secondGroup[2][1][2]=new Option("」第三节(2)","../pictures/cartoon/2.htm");      
secondGroup[2][1][3]=new Option("」第三节(3)","../pictures/cartoon/3.htm");      
      
secondGroup[2][2][0]=new Option("」第四类"," ");      
secondGroup[2][2][1]=new Option("第三节l(1)","../pictures/email/1.htm");      
secondGroup[2][2][2]=new Option("第三节(2)","../pictures/email/1.htm"); 

var temp1=document.isc.stage3      
function redirect1(y){      
for (m=temp1.options.length-1;m>0;m--)      
temp1.options[m]=null      
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){      
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)      
}      
temp1.options[0].selected=true   
}   
function redirect2(){   
window.open(temp1.value,"","toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes, resizable=yes,copyhistory=yes,width=700,height=450");   
}   
//-->
</script>
</body>
</html>
·上一篇:又一个全国省市双级联动下拉选择框
·下一篇:33个JavaScript经典效果
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2008 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备08002933号