js下拉框二级关联菜单效果代码具体实现
2013-08-03 12:17
886 查看
这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下
<!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>双选择关联菜单-www.jbxue.com</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>
相关文章推荐
- js下拉框二级关联菜单效果代码具体实现
- js下拉框二级关联菜单效果代码具体实现
- js实现的黑背景灰色二级导航菜单效果代码
- js实现 导航栏二级菜单hover下拉效果
- js实现的黑背景灰色二级导航菜单效果代码
- JS+CSS实现简单的二级下拉导航菜单效果
- JS+CSS实现简单的二级下拉导航菜单效果
- 实现监听下拉具体达到显示和隐藏效果的js的核心代码
- 纯CSS(无JS)实现的二级弹出菜单效果代码
- jquery实现的简单二级菜单效果代码
- JS实现仿Windows7风格的网页右键菜单效果代码
- js实现收缩菜单效果实例代码
- js实现的动画导航菜单效果代码
- 原生js实现半透明遮罩层效果具体代码
- JS实现仿QQ面板的手风琴效果折叠菜单代码
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- js实现简洁的滑动门菜单(选项卡)效果代码
- jQuery实现的淡入淡出二级菜单效果代码
- js实现鼠标点击左上角滑动菜单效果代码
- JS+CSS实现大气的黑色首页导航菜单效果代码