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操作 cookie对象
Dec 26 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 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/10/31 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
Python迭代器和生成器介绍
2015/03/06 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python中logging实例讲解
2019/01/17 Python
python实现宿舍管理系统
2019/11/22 Python
python 6行代码制作月历生成器
2020/09/18 Python
前处理组长岗位职责
2014/03/01 职场文书
经典促销广告词大全
2014/03/19 职场文书
剪彩仪式主持词
2014/03/19 职场文书
借款协议书
2014/09/16 职场文书
行政答辩状范文
2015/05/21 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript