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函数
Jul 21 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
JavaScript中DOM详解
Apr 13 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
vue配置font-awesome5的方法步骤
Jan 27 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
django 发送手机验证码的示例代码
2018/04/25 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
质检部部长职责
2013/12/16 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
协议书格式模板
2016/03/24 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis