用jquery解析JSON数据的方法 --多级联动。

以前写的东西，好久没写忘记了，现在用一下jquery来实现把，为了以后还写备份到博客上来来把。

效果图：

 

UI部分

---

<asp:DropDownList ID="editccVillage" runat="server" onchange="selectVillage()"></asp:DropDownList>小区

<asp:DropDownList ID="editccBuildingname" runat="server" onchange="selectUnitnum()"></asp:DropDownList>号楼

<asp:DropDownList ID="editccUnitnum" runat="server"></asp:DropDownList>单元

 JS部分

---

<script type="text/javascript" language="javascript" src="../Js/jquery-1.4.2.min.js"></script>  

<script type="text/javascript" language="javascript">

    function selectVillage() {

        var buil = document.getElementById('<%=editccBuildingname.ClientID %>');

        var pid = document.getElementById('<%=editccVillage.ClientID %>').value;

        var url = "../config/village.ashx?ParentId=" + pid;

        

          $.getJSON(url, function(data){

                for(i in data){

                    var varItem = new Option(data[i].Cname, data[i].ID);

                    buil.options.add(varItem);

                    //alert(data[i].Cname);

                }

          });

        }

    function selectUnitnum() {

            var buil = document.getElementById('<%=editccUnitnum.ClientID %>');

            var pid = document.getElementById('<%=editccBuildingname.ClientID %>').value;

            var url = "../config/village.ashx?ParentId=" + pid;

            $.getJSON(url, function (data) {

                for (i in data) {

                    var varItem = new Option(data[i].Cname, data[i].ID);

                    buil.options.add(varItem);

                   //alert(data[i].Cname);

                }

        });

    }

</script> 

village.ashx部分

 

<%@ WebHandler Language="C#" Class="village" %>
using System;
using System.Web;
using System.Data;
using System.Text;
using Webknife.Data;
using Webknife.Busi;

public class village : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {

        // 数组   [{"ID":"275","Cname":"A1"},{"ID":"319","Cname":"A2"},{"ID":"322","Cname":"A3"}]
        int ParentId = Convert.ToInt32(context.Request["ParentId"]);
        string strSQL = "select Cv_ID,Cv_Name,ParentId,BusType from NT_Clcs_Village where ParentId= " + ParentId + " order by Cv_ID asc";
        DataTable dt =DbHelper.ExecuteDataset(SysConst.DBNAME_XIAOWU, strSQL).Tables[0];
        StringBuilder strClass = new StringBuilder();
        if (dt != null)
        {
            strClass.Append("[");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                strClass.Append("{");
                strClass.Append("\"ID\":\"" + dt.Rows[i]["Cv_ID"].ToString() + "\",");
                strClass.Append("\"Cname\":\"" + dt.Rows[i]["Cv_Name"].ToString() + "\"");
                if (i != dt.Rows.Count - 1)
                {
                    strClass.Append("},");
                }
            }
        }
        strClass.Append("}");
        strClass.Append("]");
        context.Response.ContentType = "application/json";
        context.Response.ContentEncoding = Encoding.UTF8;
        context.Response.Write(strClass.ToString());
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

城市联动：http://www.cnblogs.com/luomingui/archive/2011/04/02/2003172.html