JS自动生成三级级联菜单

<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>

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);
}
}
}

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;
}