JS自动生成三级级联菜单

HTML代码：

<div id="CategorySelector">
        <ul id="Category_LeftTag" class="Blank">
        </ul>
        <ul id="Category_CenterTag" class="Blank">
        </ul>
        <ul id="Category_RightTag" class="Blank">
        </ul>
        </div>

JS代码：

var typeData;
$.getJSON("../data/GetTypeData.aspx", { "resultType": "json" }, function(data, textStatus) {
    typeData = data;
    var arrayparent = new Array();
    for (var i = 0; i < data.length; i++) {
        if (data[i].ParentId == 0) {
            arrayparent.push(data[i]);
        }
    }
    //添加一级标签
    var parentDiv = document.getElementById("Category_LeftTag");
    for (var j = 0; j <= arrayparent.length - 1; j++) {
        $('<li class="leftpanel"  οnclick="btnOK(this,1,' + arrayparent[j].id + ')" value="' + arrayparent[j].id + '"  οnmοuseοver="" οnmοuseοut="mouseOut(this)">' + arrayparent[j].name + '</li>').appendTo(parentDiv);
    }
}
        )

//根据父ID获得子类
function GetChildData(id, data) {
    var childData = new Array();
    for (var i = 0; i < data.length; i++) {
        if (id == data[i].ParentId) {
            childData.push(data[i]);
        }
    }
    return childData;
}

//添加二级标签
function spitShow(value) {
    var array = GetChildData(value, typeData);
    //alert(array.length);
    var centerDiv = document.getElementById("Category_CenterTag");
    centerDiv.innerHTML = '';
    if (array.length > 0) {
        for (var j = 0; j < array.length; j++) {
            $('<li class="centerpanel" οnclick="btnOK(this,2,' + array[j].id + ')" value="' + array[j].id + '" οnmοuseοver="" οnmοuseοut="mouseOut(this)">' + array[j].name + '</li>').appendTo(centerDiv);
        }
    }
    var rightDiv = document.getElementById("Category_RightTag");
    rightDiv.innerHTML = '';
}
//添加三级标签 class="Selected" 
function thspitShow(value) {
    var array = GetChildData(value, typeData);
    //alert(array.length);
    var rightDiv = document.getElementById("Category_RightTag");
    rightDiv.innerHTML = '';
    if (array.length > 0) {
        for (var j = 0; j < array.length; j++) {
            $('<li class="rightpanel" οnclick="btnOK(this,3,' + array[j].id + ')" value="' + array[j].id + '" οnmοuseοut="mouseOut(this)">' + array[j].name + '</li>').appendTo(rightDiv);
        }
    }
}

//增加选择样式
function mouseOut(obj) {
}
function btnOK(obj, level, value) {
    switch (level) {
        case 1: $(".leftpanel").removeClass("Selected"); spitShow(value); break;
        case 2: $(".centerpanel").removeClass("Selected"); thspitShow(value); break;
        case 3: $(".rightpanel").removeClass("Selected"); break;
        default: alert("OK"); break
    }
    $(obj).addClass("Selected");
    $("#selectType").attr("value", value);
    var typeNameHtml = $("#typeFullName");
    if (typeNameHtml.length>0) {
        var typeName = $(".Selected");
        if (typeName.length>0) {
            var fullName = "";
            for (var i = 0; i < typeName.length; i++) {
                if (i != typeName.length - 1) {
                    fullName += typeName[i].innerHTML + '/';
                }
                else {
                    fullName += typeName[i].innerHTML;
                }
            }
            $("#typeFullName").attr("value", fullName);
        }
    }
}

CSS代码：

 body *{
 margin:0;
 padding:0;
 }
 #CategorySelector{
 clear:both;
 width:450px;
 height:252px;
 background-color:#FFF;
 margin-bottom:8px;
 margin:0 auto;
 }
 #CategorySelector ul{
 margin:0 3px 0 0;
 padding:0;
 border:1px solid #CCC;
 float:left;
 width:189px;
 height:250px;
 overflow:auto;
 }
 #CategorySelector ul.Blank{
 background-color:#F6F6F6;
 }
 #CategorySelector li{
 list-style-type:none;
 width:auto;
 height:20px;
 margin:0 1px !important;
 margin /**/:0 1px 0 -15px;
 padding:0;
 border:1px solid #FFF;
 line-height:20px;
 color:#444;
 text-indent:3px;
 cursor:default;
 }
 #CategorySelector li.Selected {
     background-color:#E5F7F7;
     border:1px solid #ADD8E6;
     color:#47A0DB;
     }
 #CategorySelector li.IsParent{
 background-image:url(/uploads/allimg/1110/publishitem_subcate_arrow.gif);
 background-position:99% 50%;
 background-repeat:no-repeat;
 }
 #CategorySelector li.RecentUsed{
 color:#170;
 }