zoukankan      html  css  js  c++  java
  • 二级联动下拉列表

    <html>
    <head>
    <title>This is a test!</title>
    </head>
    <body>
    <form name="frm">
    <select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
    <option selected>请选择</option>
    <option value="1">脚本语言</option>
    <option value="2">高级语言</option>
    <option value="3">其他语言</option>
    </select>
    
    <select name="s2">
    <option value="请选择" selected>请选择</option>
    </select>
    </form>
    <script language="javascript">
    //获取一级菜单长度
    var select1_len = document.frm.s1.options.length;
    var select2 = new Array(select1_len);
    //把一级菜单都设为数组
    for (i=0; i<select1_len; i++)
    { select2[i] = new Array();}
    //定义基本选项
    select2[0][0] = new Option("请选择", " ");
    
    select2[1][0] = new Option("PHP", " ");
    select2[1][1] = new Option("ASP", " ");
    select2[1][2] = new Option("JSP", " ");
    
    select2[2][0] = new Option("C/C++", " ");
    select2[2][1] = new Option("Java", " ");
    select2[2][2] = new Option("C#", " ");
    
    select2[3][0] = new Option("Perl", " ");
    select2[3][1] = new Option("Ruby", " ");
    select2[3][2] = new Option("Python", " ");
    //联动函数
    function redirec(x)
    {
    var temp = document.frm.s2;
    for (i=0;i<select2[x].length;i++)
    { temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);}
    temp.options[0].selected=true;
    }
    </script>
    </body>
    </html>

    效果

  • 相关阅读:
    poj 2674 Linear world
    poj 3185 The Water Bowls
    The Largest Clique (uva11324)
    Proving Equivalences (LA 4287)
    强联通分量( HihoCoder 1185 )
    求点双联通分量(HihoCoder
    求桥,割点(HihoCoder
    欧拉回路
    uva10054
    表达式树(公共表达式消除 uva 12219)
  • 原文地址:https://www.cnblogs.com/wangdahai/p/5485751.html
Copyright © 2011-2022 走看看