js 三级关联菜单效果实例_javascript技巧

复制代码 代码如下:

<!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","http://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>

时间: 2025-01-21 02:37:12

js 三级关联菜单效果实例_javascript技巧的相关文章

JS三级可折叠菜单实现方法_javascript技巧

本文实例讲述了JS三级可折叠菜单实现方法.分享给大家供大家参考,具体如下: .ASPX代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigateMenu.aspx.cs" Inherits="NavigateMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

JS实现弹性菜单效果代码_javascript技巧

本文实例讲述了JS实现弹性菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JavaScript+CSS实现弹性菜单--纯属自己写着练习,无使用第三方的类库,我觉得是值得学习前端设计的朋友参考的,有兴趣的朋友可以把弹性的菜单背景换成一个漂亮的图片,这样更漂亮了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tx-move-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

js调出上下文菜单的实例_javascript技巧

本文实例讲述了js调出上下文菜单的实例代码,分享给大家供大家参考,具体如下: 原理 当用户点击右键时会触发一个contextmenu事件,默认会触发浏览器的默认的上下文菜单,通过手动阻止这个默认行为,然后再显示自定义的上下文菜单,当用户单击时隐藏这个菜单即可.代码 1.html <div id="box" style="color:red;width: 100%;height:1000px;" > <div id="left"

JS模拟bootstrap下拉菜单效果实例_javascript技巧

本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的

js 单击式的下拉菜单效果实例_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

javascript实现多栏闭合展开式广告位菜单效果实例_javascript技巧

本文实例讲述了javascript实现多栏闭合展开式广告位菜单效果.分享给大家供大家参考.具体如下: 从操作方式上来说,有似曾相识的感觉,有点手风琴菜单的味道,像一个折叠面板,用JavaScript和CSS结合来实现,虽然不华丽,但很简洁实用,也算是给喜欢网页特效的朋友们一个可参考素材吧. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

js+css实现导航效果实例_javascript技巧

本文实例讲述了js+css实现导航效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 程序代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" xml:lan

Js点击弹出下拉菜单效果实例_javascript技巧

复制代码 代码如下: <STYLE type=text/css> .menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR:

js实现tab切换效果实例_javascript技巧

直接先来个真相吧:   [HTML代码] <div id="menu"> <!--tag标题--> <ul id="nav"> <li><a href="#" class="selected">tab1</a></li> <li><a href="#" class="">tab2&