梅雪香(Meixx)的专栏

致力js

用户操作

[留言] [发消息] [加为好友]

订阅我的博客

[编辑]zhaoxiaoyang的公告

公告:所有母的在家相夫教子!

[编辑]文章分类

存档

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

</script>
</body>
</html>