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 load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 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版国家代码、缩写查询函数代码
2011/08/14 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP基本语法总结
2014/09/06 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
PHP基本语法实例总结
2016/09/09 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python 循环数据赋值实例
2019/12/02 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
2014年“世界无车日”活动方案
2014/09/21 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫