无限级关联菜单[完全js版]（下拉菜单型）

来源：互联网发布：linux mib文件编辑：程序博客网时间：2024/05/17 08:59

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择分类</title>
<script language="JavaScript" type="text/javascript">
/*
功能：无限级关联菜单[完全js版]
作者：多菜鸟
时间： 2007-04-07
blog: http://blog.csdn.net/kingerq/

数组形如:
menuArr[ID] = [名称, 父ID];
*/

var menuArr = new Array();
menuArr[1] = ["中国", 0];
menuArr[2] = ["美国", 0];
menuArr[3] = ["日本", 0];
menuArr[4] = ["浙江", 1];
menuArr[5] = ["福建", 1];
menuArr[6] = ["东京", 3];
menuArr[7] = ["杭州", 4];
menuArr[8] = ["温州", 4];
menuArr[9] = ["鹿城", 8];

var menuLen = menuArr.length;
//下拉关联操作
//(单元格所在<tr>ID名称，父ID，当前菜单级数)
function menuChange( nameStr, pid, len ){
delKid(nameStr,len);//删除子菜单
var tdId = "";
var d = document.all[nameStr];
var tdLen = d.cells.length;
var result = tdLen>=1 && pid==0 ? "" : readKid(pid);
if( result != "" ) {
tdId = d.insertCell(tdLen);//动态添加一列
}
//alert(tdId.innerHTML+" "+result);
if( tdId != "" )
tdId.innerHTML='<select name="menuid" size="5" ondblclick="sendResult(this.value)" onchange="menuChange(/''+nameStr+'/', this.value, '+(tdLen+1)+')"><option value=0>请选择分类</option>'+result+'</select>';

}
//动态删除表格列
function delKid(nameStr,len){
if( len < 1 ) len = 1;
var d = document.all[nameStr];
//alert(d.cells.length);
while( d.cells.length > len ) {
   d.deleteCell(d.cells.length-1);
}
}
//取得子分类
function readKid( pid) {
var str = "";
for( var i = 0; i < menuLen; i++ ) {
if( menuArr[i] == undefined ) continue;
if( menuArr[i][1] == pid ) str += "<option value='"+i+"'>"+menuArr[i][0]+"</option>";
}
return str;
}
//取得全部父项名称或者ID
//(菜单ID值，分隔符[无值则返回ID字符串])
function getParent(id, text) {
var str = "";
var valArr = new Array();
var i = 0;
while(id) {
    valArr[i++] = text == undefined ? id : menuArr[id][0];
id = menuArr[id][1];//父ID
}
var len = valArr.length;
while(len) {
    str += (str ? (text == undefined ? "," : text) : "" )+valArr[len-1];
len--;
}
return str;
}
//双击返回结果
function sendResult(pid) {
if( ! readKid(pid)) {//没有子项就输出结果
    alert(getParent(pid, ">>"));
}
}
</script>