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"  onclick="btnOK(this,1,' + arrayparent[j].id + ')" value="' + arrayparent[j].id + '"  onmouseover="" onmouseout="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" onclick="btnOK(this,2,' + array[j].id + ')" value="' + array[j].id + '" onmouseover="" onmouseout="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" onclick="btnOK(this,3,' + array[j].id + ')" value="' + array[j].id + '" onmouseout="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; }