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 相关文章推荐
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
python是怎么被发明的
2020/06/15 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
自荐信格式范文
2013/10/07 职场文书
工程售后服务方案
2014/06/08 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
2016继续教育研修日志
2015/11/13 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL