js实现简单的联动菜单效果


Posted in Javascript onAugust 19, 2015

本文实例讲述了js实现简单的联动菜单效果。分享给大家供大家参考。具体如下:

这是一个最简单的js联动菜单代码,在DW里可以自动生成,不想在DW里生成的话,把此份代码拷贝下拉修改也可以。网页上常用到一种Select联动菜单。

运行效果截图如下:

js实现简单的联动菜单效果

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
取选中的radio的值
Jan 11 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
js a标签点击事件
Mar 30 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 #Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 #Javascript
easyui Draggable组件实现拖动效果
Aug 19 #Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 #Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 #Javascript
JS实现可调整倒计时间代码分享
Aug 18 #Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 #Javascript
You might like
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
js数组去重的方法总结
2019/01/18 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
建筑工程管理专业自荐信范文
2013/12/28 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
学生会竞聘书范文
2014/03/31 职场文书
房屋公证委托书
2014/04/03 职场文书
贷款担保申请书
2014/05/20 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
高考升学宴主持词
2019/06/21 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript