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之Ajax运用 学习运用篇
Sep 26 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
Vue操作Storage本地化存储
Apr 29 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单例模式实现(对象只被创建一次)
2012/12/05 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
结束运行python的方法
2020/06/16 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
自荐信格式的六要素
2013/09/21 职场文书
协议书样本
2014/04/23 职场文书
行政专员求职信范文
2014/05/03 职场文书
市政管理求职信范文
2014/05/07 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
党员思想汇报材料
2014/12/19 职场文书
党支部培养考察意见
2015/06/02 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android