js实现简单的联动菜单效果
作者:企鹅 发布时间:2024-04-19 09:54:45
标签:js,联动菜单
本文实例讲述了js实现简单的联动菜单效果。分享给大家供大家参考。具体如下:
这是一个最简单的js联动菜单代码,在DW里可以自动生成,不想在DW里生成的话,把此份代码拷贝下拉修改也可以。网页上常用到一种Select联动菜单。
运行效果截图如下:
在线演示地址如下:
http://demo.aspxhome.com/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程序设计有所帮助。
0
投稿
猜你喜欢
- 语法 SET IDENTITY_INSERT [ database.[ owner.] ] { table } { ON | OFF } 参
- IE测试通过,FF有点小BUGCls_Leibie.asp代码如下:<% '数据库字段为类属性,添加、删除、修改、操
- 特点python的作用域是静态的,在源代码中变量名被赋值的位置决定了该变量能被访问的范围。即Python变量的作用域由变量所在源代码中的位置
- 本文实例为大家分享了JS实现京东快递单号查询的具体代码,供大家参考,具体内容如下<!DOCTYPE html><html
- model.py:#!/usr/bin/python# -*- coding: utf-8 -*-import torchfrom torc
- 前言mysql是高版本,当执行group by时,select的字段不属于group by的字段的话,sql语句就会报错。错误提示:this
- 我们知道可以将一个海量记录的 MySQL 大表根据主键、时间字段,条件字段等分成若干个表甚至保存在若干服务器中。 唯一的问题就是跨服务器批量
- 例如:JSON字符串:var str1 = '{ "name": "cxh", "
- 本文研究的主要是Django rest framework的相关内容,分享了example,具体如下。Django REST框架是构建Web
- 目录1. 理解进程2. 进程的语法3. join自定义进程类4. 守护进程总结1. 理解进程进程的概念:(process)进程就是正在运行的
- 背景pytorch作为深度学习的计算框架正得到越来越多的应用.我们除了在模型训练阶段应用外,最近也把pytorch应用在了部署上.在部署时,
- torch.cat()函数可以将多个张量拼接成一个张量。torch.cat()有两个参数,第一个是要拼接的张量的列表或是元组;第二个参数是拼
- 基于邮件通知的服务监控和告警系统主要功能点:配置专用日志格式记录耗时日志格式:'simple':{'format
- 由于Oracle自身比较复杂,在Linux环境下安装要涉及很多方面的因素。本文分两个方面介绍在Linux RedHat 6.0环境下Orac
- 作为一个非设计出生的研究思路偏向的设计师,带着少了设计师自恋和自怜的眼光,我记下最近一年来感受到的交互设计师的尴尬。交互设计师就是出界面的,
- PYTHON 字节码设计在本篇文章当中主要给大家介绍 cpython 虚拟机对于字节码的设计以及在调试过程当中一个比较重要的字段 co_ln
- python3 默认的是UTF-8格式,但在在用dump写入的时候仍然要注意:如下import jsondata1 = { "Te
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 首先说登陆在config.inc.php文件中,有一个选项需要设置查找:$cfg['Servers'][$i]['a
- 前言SQL Server开发过程中,为了传入数据集类型的变量(比如接受C#中的DataTable类型变量),需要定义“用户自定义表类型”,通