脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 三级关联菜单效果

js 三级关联菜单效果实例

 更新时间：2013年08月13日 16:01:33   作者：  
这篇文章介绍了js 三级关联菜单效果，有需要的朋友可以参考一下

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>js 三级关联菜单</title>
</head>
<body>
<FORM name="isc">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1----</option>
<option>Webmaster Sites</option>
<option>News Sites</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2-----</option>
<option value=" " selected>---Select2-----</option>
</select>
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3-----</option>
<option value=" " selected>---Select3-----</option>
</select>
<script>
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("---Select2---"," ");
group[1][0]=new Option("Now Select This One"," ");
group[1][1]=new Option("JavaScript","47");
group[1][2]=new Option("DHTML","46");
group[1][3]=new Option("CGI","45");
group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("General News","115");
group[2][2]=new Option("Technology News","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("---Select 3---"," ");
secondGroup[1][0][0]=new Option("---Select 3---"," ");
secondGroup[1][1][0]=new Option("Now Select This One"," ");
secondGroup[1][1][1]=new Option("Website Abstraction","http://wsabstract");
secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher/javascript/");
secondGroup[1][1][3]=new Option("Java-Scripts.net","https://www.jb51.net");
secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("Dynamic Drive","dynamicdrive");
secondGroup[1][2][2]=new Option("Beginner's Guide to DHTML","geocities/ResearchTriangle/Facility/4490/");
secondGroup[1][2][3]=new Option("Web Coder","http://sc.jb51.net/");
secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("CGI Resources","cgi-resources");
secondGroup[1][3][2]=new Option("Ada's Intro to CGI","http://play.jb51.net/");
secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("CNN","cnn");
secondGroup[2][1][2]=new Option("MSNBC","msnbc");
secondGroup[2][1][3]=new Option("ABC News","abcnews");
secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("News","news");
secondGroup[2][2][2]=new Option("Wired","wired");
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(z){
window.location=temp1[z].value
}

//-->
</script>
</FORM>
</body>
</html></td>
   </tr>
 </table>

您可能感兴趣的文章:

相关文章

  • js获取视频时长代码

    js获取视频时长代码

    下面的这段js获取视频时长代码是网上找的，还没有测试,需要的朋友可以参考下
    2014-04-04
  • JS编写兼容IE6,7,8浏览器无缝自动轮播

    JS编写兼容IE6,7,8浏览器无缝自动轮播

    在本篇文章里我们给大家带来一篇关于用原生JS编写兼容IE6,7,8浏览器无缝自动轮播的相关知识点，需要的朋友们参考下。
    2018-10-10
  • 详解微信小程序中的页面代码中的模板的封装

    详解微信小程序中的页面代码中的模板的封装

    这篇文章主要介绍了详解微信小程序中的页面代码中的模板的封装的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
    2017-10-10
  • js实现固定区域内的不重叠随机圆

    js实现固定区域内的不重叠随机圆

    这篇文章主要为大家详细介绍了js实现固定区域内的不重叠随机圆，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • js前端技巧之图片格式转换(File、Blob、base64)

    js前端技巧之图片格式转换(File、Blob、base64)

    这篇文章主要给大家介绍了关于js前端技巧之图片格式转换(File、Blob、base64)的相关资料,主要记录一下比较常见的图片格式（File、Blob、base64）在不同的场景他们之间的相互转换的方法,需要的朋友可以参考下
    2023-04-04
  • 基于javascript canvas实现五子棋游戏

    基于javascript canvas实现五子棋游戏

    这篇文章主要介绍了基于javascript canvas实现的五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 基于JavaScript实现一定时间后去执行一个函数

    基于JavaScript实现一定时间后去执行一个函数

    在实际需要中可能需要规定在指定的时间之后再去执行一个函数以达成期望的目的，这也就是一个定时器效果,本文给大家介绍基于JavaScript实现一定时间后去执行一个函数的相关知识，感兴趣的朋友一起学习吧
    2015-12-12
  • 纯js实现倒计时功能

    纯js实现倒计时功能

    本文主要介绍了通过js实现页面的倒计时功能的思路与方法，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • js实现跟随鼠标移动且带关闭功能的图片广告实例

    js实现跟随鼠标移动且带关闭功能的图片广告实例

    这篇文章主要介绍了js实现跟随鼠标移动且带关闭功能的图片广告,实例分析了javascript操作鼠标事件及html元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript字符和ASCII实现互相转换

    JavaScript字符和ASCII实现互相转换

    这篇文章主要介绍了JavaScript字符和ASCII实现互相转换,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06

最新评论