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实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
javascript中Number的方法小结
Nov 21 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
layui复选框限制选择个数的方法
Sep 18 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
基于empty函数的判断详解
2013/06/17 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
destoon数据库表说明汇总
2014/07/15 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python中itertools模块用法详解
2014/09/25 Python
Python模块WSGI使用详解
2018/02/02 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python银行系统实战源码
2019/10/25 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Django 实现图片上传和下载功能
2020/12/31 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
翻译学院毕业生自荐书
2014/02/02 职场文书
城管综合整治方案
2014/05/01 职场文书
暑期培训班招生方案
2014/08/26 职场文书
新员工入职欢迎词
2015/01/23 职场文书