<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无限级联动菜单</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
function listNode(id,pid,text) {
this.id=id; //id值
this.pid=pid; //父id
this.text=text; //显示的标题
}
function List(objName,selectName,firstOptionText,firstOptionValue,selectClass,optioneClass) {
this.objName=objName; //本对象名
this.selectName=selectName; //选单名前缀,后缀自动从0开始,第级选单加1,在提交表单时用此名称
this.selectClass=selectClass; //select的CSS之class
this.optioneClass=optioneClass; //option的CSS之class
this.firstOptionText=firstOptionText; //第一个选项的text
this.firstOptionValue=firstOptionValue; //第一个选项的value
this.groupid=[];
this.nodes=[];//所有记录
this.str="";
};
List.prototype.add = function(id,pid,text) {
if (!this.groupid[pid])this.groupid[pid]=new Array();
this.groupid[pid][this.groupid[pid].length]=id;
this.nodes[id]= new listNode(id,pid,text);
};
List.prototype.toString = function() {
this.str=this.getStr(1,0);
return this.str;
}
List.prototype.getStr=function (pid,level){
var str='';
if (!this.groupid[pid]) return str;
if (this.selectClass) str+=" class=\""+selectClass+"\"";
str = '<select name="'+this.selectName+level+'" id="'+this.selectName+level+'"'+str+' onchange="'+this.objName+'.changeChildList(this.options[this.selectedIndex].value,'+level+')">';
if (this.firstOptionText){
str += '<option value="'+this.firstOptionValue+'"';
if (this.optioneClass)str+=' class="'+optioneClass+'"';
str += '>'+this.firstOptionText+'</option>';
}
var total=this.groupid[pid].length;
for (var i=0;i<total;i++){
var cid=this.groupid[pid];
var cn=this.nodes[cid];//本节点对象
str += '<option value="'+cid+'"';
if (this.optioneClass) str+=' class="'+optioneClass+'"';
str += '>'+cn.text+'</option>';
}
str += "</select>";
str +='<div id="'+this.selectName+'childList'+level+'">';
if (!this.firstOptionText)str +=this.getStr(this.nodes[this.groupid[pid][0]].id,level+1);
str +='</div>';
return str;
}
List.prototype.changeChildList = function (pid,level){
var str=this.getStr(pid,level+1);
alert('childList'+level+'.innerHTML='+str);
eval(this.selectName+'childList'+level+'.innerHTML=\''+str+'\'');
}
var list=new List('list','select','全部',0);
list.add(1,-1,'Smarty 入門');
list.add(5,1,'控制樣版的內容');
list.add(16,5,'巢狀資料的呈現');
list.add(17,5,'轉換資料庫中的資料');
list.add(18,5,'決定內容是否顯示');
list.add(7,5,'樣版引擎的運\作原理');
list.add(19,7,'aaa');
list.add(2,1,'Smarty介紹');
list.add(8,2,'使用Smarty的一些概念');
list.add(4,1,'從變數開始');
list.add(14,4,'修飾你的變數');
list.add(13,4,'如何使用變數');
list.add(3,1,'Smarty的基礎');
list.add(9,3,'安裝Smarty');
list.add(10,3,'程式的資料夾設定');
list.add(11,3,'第一個用Smarty寫的小程式');
list.add(12,3,'如何安排你的程式架構');
list.add(20,1,'asdads');
list.add(21,1,'111111111111');
list.add(22,1,'test');
list.add(23,22,'test1');
list.add(24,23,'test11');
list.add(25,24,'test111');
list.add(26,25,'test1111');
list.add(27,23,'test2');
document.write(list);
</script>
</body>
</html>
