N级联下拉列表

 <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>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值