人本是人，不必刻意去做人；世本是世，无须精心去处世；便也就是真正的做人与处世了。

闲着没事自己写了个javascript无限级连动菜单

上一篇 / 下一篇 2007-07-23 09:03:04 / 个人分类：经验交流

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<scrīpt language="javascrīpt">
function pageLoad(selId,sortId){
var ōbj = new sortPage('sortdiv',3,'id',0,'0,1,2');
if(selId == "" && sortId == "") obj.loadData();
else obj.changData(selId,sortId);
}
function sortPage(sortDivId,sortNumber,sortName,type,editId){
var arrSort = new Array;
var selName = new Array;
var selTrue = new Array;
var selList = new Array;
var allEditId = new Array;
this.arrSort = arrSort;
this.selList = selList;
this.selName = selName;
this.selTrue = selTrue;
this.sortDivId = sortDivId;            //分类显示区域Id
this.sortNumber = sortNumber;            //显示几级分类
this.sortName = sortName;             //分类名称10
this.sortDiv = document.getElementById(this.sortDivId);     //分类显示区域
this.type = type;               //告诉程序是选择还是编辑
this.allEditId = editId.split(",");          //编辑时的默认选中id
for(i=0;i<this.sortNumber;i++){
    this.arrSort[i] = new Array(new Array('0','开会地方','0'),new Array('0','士大夫','1'),new Array('1','啊热','2'),new Array('1','按时电风','3'));
this.selName[i] = this.sortName+"_"+i;
if(i == this.sortNumber-2) this.selName[i] = "p_"+this.sortName;   //为方便动态修改数据库数据时用的p-id！
if(i == this.sortNumber-1) this.selName[i] = this.sortName;    //获得每个下拉表的id
this.selTrue[i] = document.getElementById(this.selName[i]);    //获得每个下拉表对象
}
}
sortPage.prototype.loadData = function(){         //初始化无级菜单
for(i=0;i<this.sortNumber;i++){
for(j=0;j<this.arrSort[i].length;j++){
   if(this.type == 0)
   {
    if(i==0){
   this.selList[i] += "<option value='"+this.arrSort[i][j][2]+"'>"+this.arrSort[i][j][1]+"</option>";
    }
    else{
   this.selList[i] = "";
    }
    }
    else{
    if(this.arrSort[i][j][2] == this.allEditId[i]) selected = "selected";
    else selected = "";
       if(i==0){
     this.selList[i] += "<option value='"+this.arrSort[i][j][2]+"' "+selected+">"+this.arrSort[i][j][1]+"</option>";
    }
    else{
       if(this.allEditId[i-1] == this.arrSort[i][j][0])
       this.selList[i] += "<option value='"+this.arrSort[i][j][2]+"' "+selected+">"+this.arrSort[i][j][1]+"</option>";
    }
    }
}
    this.sortDiv.innerHTML += "<select id='"+this.selName[i]+"' name='"+this.selName[i]+"' ōnchange='pageLoad("+(i+1)+",this.value)'><option value=''>==请选择==</option>"+this.selList[i]+"</select>";
}
}
sortPage.prototype.changData = function(selId,sortId){      //连动菜单方法
   for(i=0;i<this.sortNumber;i++){
  if(selId == i && sortId != ""){
    this.selTrue[i].length = 0;
    this.selTrue[i].options[0] = new Option("==请选择==","");
    for(j=0;j<this.arrSort[i].length;j++){
   if(sortId == this.arrSort[i][j][0]){
     this.selTrue[i].options[this.selTrue[i].length] = new Option(this.arrSort[i][j][1], this.arrSort[i][j][2]);
   }
    }
    for(s=i+1;s<this.sortNumber;s++){
     this.selTrue[s].length = 0;
        this.selTrue[s].options[0] = new Option("==请选择==","");
    }
  }
  else if(selId == i && sortId == ""){
    for(s=i;s<this.sortNumber;s++){
       this.selTrue[s].length = 0;
    this.selTrue[s].options[0] = new Option("==请选择==","");
    }
  }
   }
}
</scrīpt>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>