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打印网页部分内容的脚本
Nov 17 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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
Smarty模板类内部原理实例分析
2019/07/03 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Django实现分页功能
2018/07/02 Python
python实现狄克斯特拉算法
2019/01/17 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
django框架模板语言使用方法详解
2019/07/18 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python如何读写CSV文件
2020/08/13 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
canvas像素画板的实现代码
2018/11/21 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
中英文求职信范文
2014/01/27 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
节约用水广告语60条
2019/11/14 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL