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,水平有待提高
Jan 31 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
第一篇初识bootstrap
Jun 21 Javascript
微信小程序之购物车功能
Sep 23 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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迭代器的内部执行过程详解
2013/11/12 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
Yii框架form表单用法实例
2014/12/04 PHP
php-msf源码详解
2017/12/25 PHP
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
JS常用知识点整理
2017/01/21 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
npm qs模块使用详解
2020/02/07 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python异常处理和日志处理方式
2019/12/24 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
《手指教学》反思
2014/02/14 职场文书
大学生村官演讲稿
2014/04/25 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
模范班主任事迹材料
2014/12/17 职场文书
财务工作失误检讨书
2015/02/19 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
如何使用PyCharm及常用配置详解
2021/06/03 Python