jQuery 三级联动选项栏

其实JS我也不熟，但刚进新公司做WEB项目，做一个三级联动的选项栏。网上搜了很多，因为选项栏中的数据是要从数据库中取出的。听说jQuery很强大，就用jQuery了。

思路：

1 将数据库中的数据转换成JSO格式，然后用getJSON获取。

GetTypeData.aspx

protected void Page_Load(object sender, EventArgs e)
		{
			//从数据库中获取数据
			ChooseTypeService typeService = new ChooseTypeService();
			List<Cxzs_Type> typeList = typeService.GetTypeList() as List<Cxzs_Type>;
			string josonStr = GetJosonData(typeList);
			//写出数据
			Response.Clear();
			Response.Write(josonStr);
			Response.End();
		}

		/// <summary>
		/// 获取Json类型的数据
		/// </summary>
		/// <param name="type"></param>
		/// <returns></returns>
		private string GetJosonData(List<Cxzs_Type> type)
		{
			string strJoson = "[";
			for (int i = 0; i < type.Count; i++)
			{
				strJoson += @"{""id"":""";
				strJoson += "" + type[i].Id + "\"" + ",";
				strJoson += @"""name"":""";
				strJoson += "" + type[i].Name + "\"" + ",";
				strJoson += @"""ParentId"":""";
				strJoson += "" + type[i].ParentId + "\"" + ",";
				strJoson += @"""FullName"":""";
				strJoson += "" + type[i].FullName + "\"" + "}";
				//多个的时候增加逗号分割符
				if (type.Count > 1 && i < type.Count - 1)
				{
					strJoson += ",";
				}
			}
			strJoson += "]";
			return strJoson;
		}

 JS中获取JSON数据的代码：

$.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]);
        }
    })

 2 用jQuery动态的将JSON数据转换成插入HTML中

前台HTML主要代码：

 <div id="mainContainer" style="border:solid 1px #CCC;">
    <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>
    </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"); break;
        case 3: $(".rightpanel").removeClass("Selected"); break;
        default: alert("OK"); break
    }
    $(obj).addClass("Selected");
    //删除ID
    $("li").removeAttr("id");
    $(obj).attr("id","chooseTarget");
    $("#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);
        }
    }
}