脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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数组的sort排序

    深入理解js数组的sort排序

    下面小编就为大家带来一篇深入理解js数组的sort排序。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • form表单转Json提交的方法(推荐)

    form表单转Json提交的方法(推荐)

    下面小编就为大家带来一篇form表单转Json提交的方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例

    JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例

    这篇文章主要介绍了JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例,可以实现逼真模拟手机拨号盘界面并实现点击输入对应号码的功能,需要的朋友可以参考下
    2015-05-05
  • 用POSTMAN发送JSON格式的POST请求示例

    用POSTMAN发送JSON格式的POST请求示例

    这篇文章主要介绍了用POSTMAN发送JSON格式的POST请求示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Next.js中处理时区的常用方案推荐

    Next.js中处理时区的常用方案推荐

    这篇文章主要为大家详细介绍了Next.js中处理时区的几种常用方案推荐,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-01-01
  • w3c编程挑战_初级脚本算法实战篇

    w3c编程挑战_初级脚本算法实战篇

    下面小编就为大家带来一篇w3c编程挑战_初级脚本算法实战篇。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • JS+HTML5实现获取手机验证码倒计时按钮

    JS+HTML5实现获取手机验证码倒计时按钮

    这篇文章主要介绍了基于JS+HTML5实现获取手机验证码倒计时按钮,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • 使用Bootstrap typeahead插件实现搜索框自动补全的方法

    使用Bootstrap typeahead插件实现搜索框自动补全的方法

    这篇文章主要介绍了使用Bootstrap typeahead插件实现搜索框自动补全的方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • js实现自定义右键菜单

    js实现自定义右键菜单

    这篇文章主要为大家详细介绍了js实现自定义右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 解析javascript系统错误：-1072896658的解决办法

    解析javascript系统错误：-1072896658的解决办法

    问题出现在用到ajax的场合。昨天还正常的程序，今天运行就有javascript系统错误：-1072896658的
    2013-07-07

最新评论