zoukankan      html  css  js  c++  java
  • JavaScript 实现N级联动的下拉列表

    <form name="form1" method="post">
    <select id="s1" name="s1"></select><select id="s2" name="s2"></select><select id="s3" name="s3"></select><select id="s4" name="s4"></select>
    </form>
    <script language="JavaScript">
    <!--
    function LianDong(arr, sel)
    {
     var me = this;
     this.$ = function(o)
     {
      return document.getElementById(o);
     }

     this.sub = function (i, pid)
     {
      for (var j=i+1; j<sel.length; j++)
      {
       me.$(sel[j]).length = 0;
       me.$(sel[j]).options[0] = new Option("请选择", "");
      }
      for ( var j = 0; j < arr.length; j++)
      {
       if (arr[j][1] == pid)
       {
        me.$(sel[i+1]).options[me.$(sel[i+1]).length] = new Option(arr[j][2], arr[j][0]);
       }
      }
     }

     this.init = function()
     {
      me.sub(-1,"root");
      for (var i=0; i<sel.length-1; i++)
      {
       me.$(sel[i]).onchange = function()
       {
        var i;
        for (i=0; me.$(sel[i])!=this; i++);
        me.sub(i, me.$(sel[i]).value);
       }
      }
     }

     this.init();
    }

    var array=new Array();
    array[0]=new Array("华南地区","root","华南地区");
    array[1]=new Array("华北地区","root","华北地区");
    array[2]=new Array("上海","华南地区","上海");
    array[3]=new Array("广东","华南地区","广东");
    array[4]=new Array("徐家汇","上海","徐家汇");
    array[5]=new Array("普托","上海","普托");
    array[6]=new Array("广州","广东","广州");
    array[7]=new Array("湛江","广东","湛江");
    array[8]=new Array("湛江1","湛江","湛江1");
    array[9]=new Array("湛江2","湛江","湛江2");
    array[10]=new Array("广州1","广州","广州1");
    array[11]=new Array("广州2","广州","广州2");

    var select = new Array("s1","s2","s3","s4");

    var liandong=new LianDong(array, select)
    //-->
    </script>

  • 相关阅读:
    <c:if></c:if>用法-转载
    Windows下配置Apache服务器
    ScrureCRT访问CentOS时出现乱码的解决办法
    Windows平台下Git服务器搭建
    Group_Concat函数示例
    Mysql Federated Server 示例
    MySQL几个特别语法示例
    MySQL事件调度器
    Disruptor Java版和.NET版的区别
    委托的三种实现方式
  • 原文地址:https://www.cnblogs.com/wzg0319/p/2028993.html
Copyright © 2011-2022 走看看