js下拉框二级关联菜单效果代码具体实现
这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下
<!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="Content-Type" content="text/html;charset=gb2312" />
<title>双选择关联菜单-www.jbxue.com</title>
</head>
<body>
<form name="doublecombo">
<p>
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>特效代码</option>
<option>网页语言</option>
<option>软件教程</option>
</select>
<select name="stage2" size="1">
<option value="/texiao/shubiao">鼠标类</option>
<option value="/texiao/chuangkou">窗口类</option>
<option value="/texiao/daohang">导航类</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>
<script>
<!--
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (I=0; I<groups; I++)
group[I]=new Array()
group[0][0]=new Option("鼠标类","/texiao/shubiao")
group[0][1]=new Option("窗口类","/texiao/chuangkou")
group[0][2]=new Option("导航类","/texiao/daohang")
group[1][0]=new Option("ASP","/yuyan/asp")
group[1][1]=new Option("PHP","/yuyan/php")
group[1][2]=new Option("JSP","/yuyan/jsp")
group[2][0]=new Option("Dreamweaver","/ruanjian/Dreamweaver")
group[2][1]=new Option("Fireworks","/ruanjian/Fireworks")
group[2][2]=new Option("Flash","/ruanjian/Flash")
group[2][3]=new Option("Photoshop","/ruanjian/Photoshop")
var temp=document.doublecombo.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
}
function go(){
location=temp.options[temp.selectedIndex].value
} //来源:脚本学堂
//-->
</script>
</form>
</body>
</html></td>
</tr>
</table>
js下拉框二级关联菜单效果代码具体实现的更多相关文章
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- jQuery下拉框插件8种效果
jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...
- js下拉框
Js下拉框 http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html
- js 下拉框效果
<script type="text/javascript"> window.onload = function () { ]; ]; var aLi = oSub.g ...
- C# MVC LayUI实现下拉框二级联动
一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...
- Ajax来实现下拉框省市区三级联动效果(服务端基于express)
//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...
- asp 下拉框二级联动
<script language = "JavaScript"> //js开始 var aaa;//定义aaa变量 aaa=0;//aaa赋0 bb = new Arr ...
- css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...
- js下拉框去掉重复的
想用jquery代码实现这样的一个功能:有一个下拉框,当选择下拉框的时候,判断选择的值有没有被选择过,如果有则提示:代码如下: $(function(){ var authTypes=new Arra ...
随机推荐
- Timus 2005. Taxi for Programmers 题解
The clock shows 11:30 PM. The sports programmers of the institute of maths and computer science have ...
- WPF 同一个程序 只允许 同时运行一个
方法2 当程序已经运行了 再运行这个程序时,则显示当前这个窗体 http://code.3rbang.com/cshape-run-one/ VS2013附件:http://fil ...
- SqlServer日常积累(一)
1. 将一个表的数据插入另一个表 情况一:目标表已存在 (1)如果2张表的字段一致,并且希望插入全部数据,可以用这种方法: Insert Into 目标表 Select * From 来源表; --例 ...
- QT内label控件通过opencv显示图像
1.对pro进行配置.使其可以理解opencv. INCLUDEPATH+=d:\opencv249\include\opencv\ d:\opencv249\include\opencv2\ d:\ ...
- PowerMock介绍
一.为什么要使用Mock工具 在做单元测试的时候,我们会发现我们要测试的方法会引用很多外部依赖的对象,比如:(发送邮件,网络通讯,远程服务, 文件系统等等). 而我们没法控制这些外部依赖的对象,为了解 ...
- C/C++程序内存分类
程序中内存分类主要有下面几种: (1)栈存储区:主要存储局部变量.函数參数.函数返回值等. 栈内存由编译器在须要时自己主动分配,使用完后自己主动释放. (2)堆存储区:由new.malloc申请到的空 ...
- 【转】javascript中值传递,地址传递,引用传递的问题(使用js创建list对象时会用到)
function initEditModal_SI(node) { if (node.siArray == undefined) { node.siArray = new Object(); } va ...
- HDU 5402 Travelling Salesman Problem(棋盘染色 构造 多校啊)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5402 Problem Description Teacher Mai is in a maze wit ...
- jQuery写一个简单的弹幕墙
概述 近几年由于直播,弹幕流行起来,之前看到过用js制作弹幕墙的思路,觉得很有趣.自己就花了点时间把他做成了更灵活的jQuery插件,现在分享出来. 详细 代码下载:http://www.demoda ...
- mysql之InnoDB内存管理
InnoDB缓冲池是通过LRU算法来管理page的.频繁使用的page放在LRU列表的前端,最少使用的page在LRU列表的尾端,缓冲池满了的时候,优先淘汰尾端的page. InnoDB中的LRU结构 ...