js实现简单的联动菜单效果
更新时间：2015年08月19日 09:38:39 作者：企鹅
这篇文章主要介绍了js实现简单的联动菜单效果,涉及javascript针对页面元素的遍历、读取及设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js实现简单的联动菜单效果。分享给大家供大家参考。具体如下：
这是一个最简单的js联动菜单代码，在DW里可以自动生成，不想在DW里生成的话，把此份代码拷贝下拉修改也可以。网页上常用到一种Select联动菜单。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-select-ld-menu-codes/
具体代码如下：
<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("搜狗音乐","http://mp3.sogou.com/")
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>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
对于type来说，更多的是对类型的一种复用，比如在项目中需要用到一些比较复杂的或者书写起来很长的类型，而对于 interface来说，它是正儿八经的用来定义接口类型（约束数类型和属性）的，且接口类型是支持继承和声明合并的，感兴趣的朋友跟随小编一起看看吧2023-07-07
聊聊JavaScript中的try...catch使用小技巧
作为一名web前端工程师,JavaScript中的try...catch是我们常用的特性之一,用于处理代码中可能出现的错误,本文小编将和大家一起聊聊JavaScript中的try...catch使用小技巧,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了简单js代码实现selece二级联动的简单实例。需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
H5跳转小程序按钮不显示(wx-open-launch-weapp)踩坑指南
这篇文章主要给大家介绍了关于H5跳转小程序按钮不显示(wx-open-launch-weapp)踩坑的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
最近在项目需求中遇到之前没有做过的功能,下面这篇文章主要给大家介绍了关于JS实用案例之输入智能提示,文中通过实例代码介绍的非常详细,打字机输出效果的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了js判断手机号运营商的方法，需要的朋友可以参考下2015-10-10
这篇文章主要为大家介绍了微前端qiankun沙箱实现的源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了微信小程序 Animation实现图片旋转动画示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文主要介绍了js实现WebSocket 连接的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
有时候我们需要用js设置文档的样式属性，下面就是一些方法与原理分析，大家可以看下，应该就没问题了。2009-04-04
最新评论