输入参数有两种类型,一是按ID一个一个的顺序输入,另一种是用同样的名字,只输入一个名字即可.
<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: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.toString = function(){
//根据输入参数,取得列表框对象集合
var pArr = this.dlts;
if (pArr.length == 1)
this.dlts = document.getElementsByName(pArr[0]);
else
for(var i=0,j=pArr.length;i<j;i++)
this.dlts[i]=document.getElementById(pArr[i]);
//检查是否获得对象的引用
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.dltChg = function(index){
if(this.addOptions(++index,this.dlts[index].value)){
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
}
//初始化第一个列表框数据
cascadeListBox.prototype.initData = function(){
this.addOptions(0,"#");
this.dlts[0].selectedIndex = -1;
}
//为列表框添加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>
posted on 2006-04-03 14:51
汪杰 阅读(223)
评论(0) 编辑 收藏 引用 所属分类:
hengxing网站js