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

        }

    }

}