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

}城市联动：/article/4995359.html