用户操作
[即时聊天] [发私信] [加为好友]
梅雪香的公告
公告:所有母的在家相夫教子!
最近评论
aboluoyuren:似乎执行脚本时有错误,报element没有对象!
呵呵,我是才学javascript的,技术很菜!
文章分类
    收藏
      相册
      存档
      软件项目交易
      订阅我的博客
      XML聚合  FeedSky
      订阅到鲜果
      订阅到Google
      订阅到抓虾
      订阅到BlogLines
      订阅到Yahoo
      订阅到GouGou
      订阅到飞鸽
      订阅到Rojo
      订阅到newsgator
      订阅到netvibes

      原创 N级联下拉列表收藏

       | 旧一篇: MxxCalendar 日期时间选择控件

       <html>
      <head>
      <script language="JavaScript">
      <!--
      /*N级联下拉列表----N取决于系统性能和数据量大小.
       *完成日期:2006-1-14
       *作者:梅雪香
      */
      //参数列表,形式如: ("dlt1","dlt2","dlt3"[,"dlt4"])参数个数不限
      //或者只有一个参数,为所有用到的下拉列表的同一名字.
      function cascadeListBox(){
       this.dlts = arguments; //取得参数列表,形式如: ("dlt1","dlt2","dlt3"[,"dlt4"])参数个数不限
       this.arrText = new Array();
       this.arrText[0] = "#:1:text0-#-1;#:2:text0-#-2;#:3:text0-#-3";
       this.arrText[1] = "1:1:text1-1-1;1:2:text1-1-2;2:3:text1-2-3;2:4:text1-2-4;3:5:text1-3-5;3:6:text1-3-6";
       this.arrText[2] = "1:1:text2-1-1;1:2:text2-1-2;2:3:text2-2-3;2:4:text2-2-4;3:5:text2-3-5;3:6:text2-3-6";

       this.toString = function(){
        //根据输入参数,取得列表框对象集合
        if (this.dlts.length == 1)
         this.dlts = document.getElementsByName(this.dlts[0]);
        else
         for(var i=0,j=this.dlts.length;i<j;i++)
          this.dlts[i]=document.getElementById(this.dlts[i]);
        if(this.dlts.length != this.arrText.length)
         throw new Error(-1,"数据源arrText个数与列表框个数不一致!!");
        //检查是否获得对象的引用
        for(var i=0,j=this.dlts.length;i<j;i++)
         if(this.dlts[i] == null)
          throw new Error(-1,"参数输入有误!/n无法根据参数取得列表框对象!");
        
        //初始化列表框数据
        this.initData();
        //设置列表框的样式
        this.setStyle();
        //为列表框绑定事件.
        this.attachEventForDlts();
       }
      }

      //初始化第一个列表框数据
      cascadeListBox.prototype.initData = function(){
       this.addOptions(0,"#");
       this.dlts[0].selectedIndex = -1;
      }

      //递归的按条件显示数据
      cascadeListBox.prototype.dltChg = function(index){
       var val = this.dlts[index].value;
       index++;
       if(this.addOptions(index,val)){
        if(index< this.dlts.length-1)
         this.dltChg(index);
       }
       else{
        for(var i=index;i<this.dlts.length;i++)
         this.dlts[i].innerHTML="";
       }
      }

      //为列表框绑定事件.
      cascadeListBox.prototype.attachEventForDlts = function(){
       for(var i=0,j=this.dlts.length-1;i<j;i++)
        this.addEvent(i);
      }

      cascadeListBox.prototype.addEvent = function(index){
       var self =this;
       this.dlts[index].attachEvent("onchange",function(){ self.dltChg(index);});
      }
        
      //设置列表框的样式
      cascadeListBox.prototype.setStyle = function(){
       //set the style of dropdownlist at here
      }

      //为列表框添加options
      cascadeListBox.prototype.addOptions = function(index,parentId){
       var dlt = this.dlts[index];
       dlt.innerHTML="";
       var str = this.arrText[index];
       var reg = new RegExp("\s*"+parentId+"\s*:\s*[^:^;]*\s*:\s*[^:^;]*\s*(?=;|$)","g");
       var txts = str.match(reg);
       if(!txts)  return false;
       for(var i=0,j=txts.length;i<j;i++){
        var attrs = txts[i].split(":");
        var opt = document.createElement("OPTION");
        opt.setAttribute("parentId",attrs[0]);
        opt.setAttribute("value",attrs[1]);
        opt.setAttribute("text",attrs[2]);
        dlt.options.add(opt);
       }
       return true;
      }

      //-->
      </script>
      </head>
      <body>
      <h2>N级联下拉列表(code by meixx)</h2>
      <table width="600" cellpadding="0" cellspacing="0" border="1" style="font-size:12">
       <tr>
        <td>
         <select name="dlt"></select>
         <select name="dlt"></select>
         <select name="dlt"></select>
        </td>
       </tr>
       <tr>
        <td>
         <li>N级联下拉列表----N取决于系统性能和数据量大小.
         <li>完成日期:2006-1-14
         <li>作者:梅雪香(code by meixx)
        </td>
       </tr>
      </table>
      <script language="JavaScript">
      <!--
      (new cascadeListBox("dlt")).toString();
      //-->
      </script>
      </body>
      </html>

      发表于 @ 2006年07月12日 15:47:00|评论(loading...)|编辑

       | 旧一篇: MxxCalendar 日期时间选择控件

      评论:没有评论。

      发表评论  


      当前用户设置只有注册用户才能发表评论。如果你没有登录,请点击登录
      Csdn Blog version 3.1a
      Copyright © 梅雪香