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 相关文章推荐
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
vue多次循环操作示例
Feb 08 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
php计算整个目录大小的方法
2015/06/01 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
用python删除java文件头上版权信息的方法
2014/07/31 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
python读取ini配置文件过程示范
2019/12/23 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
零基础小白多久能学会python
2020/06/22 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
财务会计毕业生自荐信
2013/11/02 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
获奖感言怎么写
2015/07/31 职场文书
初一军训感言
2015/08/01 职场文书
企业法律事务工作总结
2015/08/11 职场文书
如何书写邀请函?
2019/06/24 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
您对思维方式了解多少?
2019/12/09 职场文书