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

最新推荐文章于 2025-09-06 16:16:54 发布

转载最新推荐文章于 2025-09-06 16:16:54 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luomingui/archive/2011/08/19/2145622.html

文章标签：

#json #javascript #ui #ViewUI

本文详细介绍了如何使用jQuery结合ASP.NET Web Forms实现小区、楼号、单元联动选择的功能，并通过village.ashx后端接口获取数据进行动态下拉列表填充。

以前写的东西，好久没写忘记了，现在用一下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

转载于:https://www.cnblogs.com/luomingui/archive/2011/08/19/2145622.html