黑马程序员技术交流社区

标题: JS自动生成三级级联菜单 [打印本页]

---

作者: 来明坤    时间: 2012-8-28 01:31
标题: JS自动生成三级级联菜单
HTML代码：
[html] view plaincopyprint?
<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代码：
[javascript] view plaincopyprint?
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代码：
[css] view plaincopyprint?
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;  
}  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2