js下拉框二级关联菜单效果代码具体实现


Posted in Javascript onAugust 03, 2013
 <!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>双选择关联菜单</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>
 
Javascript 相关文章推荐
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
jquery ui对话框实例代码
May 10 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 #Javascript
js判断输入是否为数字的具体实例
Aug 03 #Javascript
js replace 与replaceall实例用法详解
Aug 03 #Javascript
jquery动态加载js三种方法实例
Aug 03 #Javascript
js innerHTML 改变div内容的方法
Aug 03 #Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 #Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 #Javascript
You might like
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
详解YII关联查询
2016/01/10 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
解放web程序员的输入验证
2006/10/06 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
python实现Flappy Bird源码
2018/12/24 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Python生成词云的实现代码
2020/01/14 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
python 装饰器重要在哪
2021/02/14 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
工作时间擅自离岗检讨书
2014/10/24 职场文书
出国留学自荐信模板
2015/03/06 职场文书
承诺书模板大全
2015/05/04 职场文书
诚实守信主题班会
2015/08/13 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
AJAX学习笔记
2021/05/18 Javascript
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python