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实现页面打印的三种方法
Mar 05 Javascript
认识延迟时间为0的setTimeout
May 16 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
vue页面跳转实现页面缓存操作
Jul 22 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
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
动态控制Table的js代码
2007/03/07 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
解析Python3中的Import
2019/10/13 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
pytorch 求网络模型参数实例
2019/12/30 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
Servlet面试题库
2015/07/18 面试题
应用心理学个人的求职信
2013/12/08 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
物理力学求职信
2014/02/18 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
负责人任命书范本
2014/06/04 职场文书
财务管理专业求职信
2014/06/11 职场文书
物业保安岗位职责
2014/07/02 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
JUnit5常用注解的使用
2021/07/02 Java/Android
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python