zoukankan      html  css  js  c++  java
  • js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了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>
  • 相关阅读:
    一个怂女婿的成长笔记【十八】
    一个怂女婿的成长笔记【十七】
    一个怂女婿的成长笔记【十六】
    一个怂女婿的成长笔记【十五】
    一个怂女婿的成长笔记【十四】
    一个怂女婿的成长笔记【十三】
    一个怂女婿的成长笔记【十二】
    一个怂女婿的成长笔记【十一】
    jmeter中“csv data set config ”函数的使用
    jmater中“_CSVRead”函数的使用
  • 原文地址:https://www.cnblogs.com/cfinder010/p/3234495.html
Copyright © 2011-2022 走看看