js 三级关联菜单效果实例


Posted in Javascript onAugust 13, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title>js 三级关联菜单</title> 
</head> 
<body> 
<FORM name="isc"> 
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)"> 
<option selected>---Select1----</option> 
<option>Webmaster Sites</option> 
<option>News Sites</option> 
</select> 
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)"> 
<option value=" " selected> </option> 
<option value=" " selected>---Select2-----</option> 
<option value=" " selected>---Select2-----</option> 
</select> 
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)"> 
<option value=" " selected> </option> 
<option value=" " selected>---Select3-----</option> 
<option value=" " selected>---Select3-----</option> 
</select> 
<script> 
var groups=document.isc.example.options.length 
var group=new Array(groups) 
for (I=0; I<groups; I++) 
group[I]=new Array() 
group[0][0]=new Option("---Select2---"," "); 
group[1][0]=new Option("Now Select This One"," "); 
group[1][1]=new Option("JavaScript","47"); 
group[1][2]=new Option("DHTML","46"); 
group[1][3]=new Option("CGI","45"); 
group[2][0]=new Option("Now Select This One"," "); 
group[2][1]=new Option("General News","115"); 
group[2][2]=new Option("Technology News","116"); 
var temp=document.isc.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 
redirect1(0) 
} 
var secondGroups=document.isc.stage2.options.length 
var secondGroup=new Array(groups) 
for (I=0; I<groups; I++) { 
secondGroup[I]=new Array(group[I].length) 
for (j=0; j<group[I].length; j++) { 
secondGroup[I][j]=new Array() }} 
secondGroup[0][0][0]=new Option("---Select 3---"," "); 
secondGroup[1][0][0]=new Option("---Select 3---"," "); 
secondGroup[1][1][0]=new Option("Now Select This One"," "); 
secondGroup[1][1][1]=new Option("Website Abstraction","http://wsabstract"); 
secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher/javascript/"); 
secondGroup[1][1][3]=new Option("Java-Scripts.net","https://3water.com"); 
secondGroup[1][2][0]=new Option("Now Select This One"," "); 
secondGroup[1][2][1]=new Option("Dynamic Drive","dynamicdrive"); 
secondGroup[1][2][2]=new Option("Beginner's Guide to DHTML","geocities/ResearchTriangle/Facility/4490/"); 
secondGroup[1][2][3]=new Option("Web Coder","http://sc.3water.com/"); 
secondGroup[1][3][0]=new Option("Now Select This One"," "); 
secondGroup[1][3][1]=new Option("CGI Resources","cgi-resources"); 
secondGroup[1][3][2]=new Option("Ada's Intro to CGI","http://play.3water.com/"); 
secondGroup[2][0][0]=new Option("---Select 3---"," "); 
secondGroup[2][1][0]=new Option("Now Select This One"," "); 
secondGroup[2][1][1]=new Option("CNN","cnn"); 
secondGroup[2][1][2]=new Option("MSNBC","msnbc"); 
secondGroup[2][1][3]=new Option("ABC News","abcnews"); 
secondGroup[2][2][0]=new Option("Now Select A Page"," "); 
secondGroup[2][2][1]=new Option("News","news"); 
secondGroup[2][2][2]=new Option("Wired","wired"); 
var temp1=document.isc.stage3 
function redirect1(y){ 
for (m=temp1.options.length-1;m>0;m--) 
temp1.options[m]=null 
for (I=0;I<secondGroup[document.isc.example.options.selectedIndex][y].length;I++){ 
temp1.options[I]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][I].text,secondGroup[document.isc.example.options.selectedIndex][y][I].value) 
} 
temp1.options[0].selected=true 
} 
function redirect2(z){ 
window.location=temp1[z].value 
} 
//--> 
</script> 
</FORM> 
</body> 
</html></td>
   </tr>
 </table>
Javascript 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
js 单击式的下拉菜单效果实例
Aug 13 #Javascript
让元素在网页中可拖动示例代码
Aug 13 #Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 #Javascript
JavaScript的Module模式编程深入分析
Aug 13 #Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 #Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 #Javascript
js setTimeout 参数传递使用介绍
Aug 13 #Javascript
You might like
世界上第一台立体声收音机
2021/03/01 无线电
PHP面向对象编程快速入门
2006/12/14 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
PHP实现递归无限级分类
2015/10/22 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
javascript实现删除前弹出确认框
2015/06/04 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
营业员实习自我鉴定
2013/12/07 职场文书
中药学自荐信
2014/06/15 职场文书
松材线虫病防治方案
2014/06/15 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
大学生英文求职信范文
2015/03/19 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
Python绘制散乱的点构成的图的方法
2022/04/21 Python