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 datepicker 使用方法
May 20 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
vue-router中hash模式与history模式的区别
Jun 23 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
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php输入数据统一类实例
2015/02/23 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python爬虫实现中英翻译词典
2019/06/25 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
监理员的岗位职责
2013/11/13 职场文书
公司委托书范本5篇
2014/09/20 职场文书
党员剖析材料范文
2014/12/18 职场文书
信访维稳承诺书
2015/05/04 职场文书
情感电台广播稿
2015/08/18 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang