jquery ajax数据操作 DropDownList级联

1、定义一个类 CityCounty.cs文件，如下：

 

[csharp] view plaincopyprint?
  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Linq; 
  4. using System.Web; 
  5. using System.Runtime.Serialization; 
  6.  
  7. /// <summary> 
  8. ///CityCounty 的摘要说明 
  9. /// </summary> 
  10. [DataContract] 
  11. publicclass CityCounty 
  12. { 
  13.     [DataMember] 
  14.     privateint menu_ID; 
  15.     publicint Menu_ID 
  16.     { 
  17.         get { return menu_ID; } 
  18.         set { menu_ID = value; } 
  19.     } 
  20.  
  21.     [DataMember] 
  22.     privatestring menu_Name; 
  23.     publicstring Menu_Name 
  24.     { 
  25.         get { return menu_Name; } 
  26.         set { menu_Name = value; } 
  27.     } 
  28. }  
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization;

/// <summary>
///CityCounty 的摘要说明
/// </summary>
[DataContract]
public class CityCounty
{
    [DataMember]
    private int menu_ID;
    public int Menu_ID
    {
        get { return menu_ID; }
        set { menu_ID = value; }
    }

    [DataMember]
    private string menu_Name;
    public string Menu_Name
    {
        get { return menu_Name; }
        set { menu_Name = value; }
    }
}

2、定义一个Json处理类，ToJson.cs文件，如下：

 

 

[csharp] view plaincopyprint?
  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Linq; 
  4. using System.Web; 
  5. using System.Runtime.Serialization.Json; 
  6. using System.IO; 
  7.  
  8. /// <summary> 
  9. ///JsonHelper 的摘要说明 
  10. /// </summary> 
  11. publicstaticclass JsonHelper 
  12. { 
  13.     //转换为Json格式输出 
  14.     publicstaticstring ToJson(thisobject obj) 
  15.     { 
  16.         DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType()); 
  17.         Stream stream = new MemoryStream(); 
  18.         serializer.WriteObject(stream, obj); 
  19.         stream.Position = 0; 
  20.         StreamReader streamReader = new StreamReader(stream); 
  21.         return streamReader.ReadToEnd(); 
  22.     } 
  23. }  
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization.Json;
using System.IO;

/// <summary>
///JsonHelper 的摘要说明
/// </summary>
public static class JsonHelper
{
    //转换为Json格式输出
    public static string ToJson(this object obj)
    {
        DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
        Stream stream = new MemoryStream();
        serializer.WriteObject(stream, obj);
        stream.Position = 0;
        StreamReader streamReader = new StreamReader(stream);
        return streamReader.ReadToEnd();
    }
}

3、定义Default4.aspx及Default4.aspx.cs文件，如下：

 

 

[csharp] view plaincopyprint?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %> 
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <html xmlns="http://www.w3.org/1999/xhtml"> 
  5. <head runat="server"> 
  6.     <title></title> 
  7.     <script src="jquery.js" type="text/javascript"></script> 
  8.     <script type="text/javascript" language="javascript"> 
  9.         $(function () { 
  10.             $("#DropDownList1").change(function () { 
  11.                 $.ajax({ 
  12.                     url: "Default5.aspx?id=" + $(this).val(), 
  13.                     data: null, 
  14.                     dataType: "json", 
  15.                     success: function (data) { 
  16.                         $("#DropDownList2").empty(); 
  17.                         //第一种方法 
  18.                         //for (var i = 0; i < data.length; i++) { 
  19.                         //$("<option value='" + data[i]["menu_ID"] + "'>" + data[i]["menu_Name"] + "</option>").appendTo("#DropDownList2"); 
  20.                         //} 
  21.                         //第二种方法  用下面的方法也能够循环输出 .each方法 
  22.                         $.each(data, function (i) { 
  23.                             $("<option value='" + data[i]["menu_ID"] + "'>" + data[i]["menu_Name"] + "</option>").appendTo("#DropDownList2"); 
  24.                         }) 
  25.                     } 
  26.                 }); 
  27.             }); 
  28.         }); 
  29.     </script> 
  30. </head> 
  31. <body> 
  32.     <form id="form1" runat="server"> 
  33.     <div> 
  34.         <div> 
  35.             <asp:Label ID="lblone" runat="server" Text="市" /> 
  36.             <asp:DropDownList ID="DropDownList1" runat="server"> 
  37.             </asp:DropDownList> 
  38.             <asp:Label ID="lbltwo" runat="server" Text="县" /> 
  39.             <asp:DropDownList ID="DropDownList2" runat="server"> 
  40.                 <asp:ListItem Text="--请选择市--" Value="1"></asp:ListItem> 
  41.             </asp:DropDownList> 
  42.         </div> 
  43.     </div> 
  44.     </form> 
  45. </body> 
  46. </html>  
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
            $("#DropDownList1").change(function () {
                $.ajax({
                    url: "Default5.aspx?id=" + $(this).val(),
                    data: null,
                    dataType: "json",
                    success: function (data) {
                        $("#DropDownList2").empty();
                        //第一种方法
                        //for (var i = 0; i < data.length; i++) {
                        //$("<option value='" + data[i]["menu_ID"] + "'>" + data[i]["menu_Name"] + "</option>").appendTo("#DropDownList2");
                        //}
                        //第二种方法  用下面的方法也能够循环输出 .each方法
                        $.each(data, function (i) {
                            $("<option value='" + data[i]["menu_ID"] + "'>" + data[i]["menu_Name"] + "</option>").appendTo("#DropDownList2");
                        })
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <asp:Label ID="lblone" runat="server" Text="市" />
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
            <asp:Label ID="lbltwo" runat="server" Text="县" />
            <asp:DropDownList ID="DropDownList2" runat="server">
                <asp:ListItem Text="--请选择市--" Value="1"></asp:ListItem>
            </asp:DropDownList>
        </div>
    </div>
    </form>
</body>
</html>
[csharp] view plaincopyprint?
  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Linq; 
  4. using System.Web; 
  5. using System.Web.UI; 
  6. using System.Web.UI.WebControls; 
  7. using USTC; 
  8. using System.Data; 
  9.  
  10. public partial class Default4 : System.Web.UI.Page 
  11. { 
  12.     DM dm = new DM(); 
  13.     protectedvoid Page_Load(object sender, EventArgs e) 
  14.     { 
  15.         if (!IsPostBack) 
  16.         { 
  17.             string strSQL = "select * from UDS_Menu where Menu_ID like '%____00%'"; 
  18.             DataSet ds = dm.getsql(strSQL); 
  19.             this.DropDownList1.DataSource = ds; 
  20.             this.DropDownList1.DataTextField = "Menu_Name"; 
  21.             this.DropDownList1.DataValueField = "Menu_ID"; 
  22.             this.DropDownList1.DataBind(); 
  23.             this.DropDownList1.Items.Insert(0,"--请选择城市--"); 
  24.         } 
  25.     } 
  26. }  
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using USTC;
using System.Data;

public partial class Default4 : System.Web.UI.Page
{
    DM dm = new DM();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string strSQL = "select * from UDS_Menu where Menu_ID like '%____00%'";
            DataSet ds = dm.getsql(strSQL);
            this.DropDownList1.DataSource = ds;
            this.DropDownList1.DataTextField = "Menu_Name";
            this.DropDownList1.DataValueField = "Menu_ID";
            this.DropDownList1.DataBind();
            this.DropDownList1.Items.Insert(0,"--请选择城市--");
        }
    }
}

 

4、定义Default5.aspx及Default5.aspx.cs文件，如下：

[csharp] view plaincopyprint?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="TEST_Default5" %> 
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml"> 
  6. <head runat="server"> 
  7.     <title></title> 
  8. </head> 
  9. <body> 
  10.     <form id="form1" runat="server"> 
  11.     <div> 
  12.      
  13.     </div> 
  14.     </form> 
  15. </body> 
  16. </html>  
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="TEST_Default5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>
[csharp] view plaincopyprint?
  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Linq; 
  4. using System.Web; 
  5. using System.Web.UI; 
  6. using System.Web.UI.WebControls; 
  7. using USTC; 
  8. using System.Data; 
  9.  
  10. public partial class TEST_Default5 : System.Web.UI.Page 
  11. { 
  12.     DM dm = new DM(); 
  13.     protectedvoid Page_Load(object sender, EventArgs e) 
  14.     { 
  15.         if (!IsPostBack) 
  16.         { 
  17.             IList<CityCounty> list = new List<CityCounty>(); 
  18.             string id = Request.QueryString["id"].ToString(); 
  19.             string strSQL = "select Menu_ID,Menu_Name from UDS_Menu where Super_Menu_ID=" + int.Parse(id); 
  20.             DataSet ds = dm.getsql(strSQL); 
  21.             for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
  22.             { 
  23.                 CityCounty c = new CityCounty(); 
  24.                 c.Menu_ID = Convert.ToInt32(ds.Tables[0].Rows[i]["Menu_ID"].ToString()); 
  25.                 c.Menu_Name = ds.Tables[0].Rows[i]["Menu_Name"].ToString(); 
  26.                 list.Add(c); 
  27.             } 
  28.             Response.Write(list.ToJson()); 
  29.             Response.End(); 
  30.         } 
  31.     } 
  32. }  
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using USTC;
using System.Data;

public partial class TEST_Default5 : System.Web.UI.Page
{
    DM dm = new DM();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            IList<CityCounty> list = new List<CityCounty>();
            string id = Request.QueryString["id"].ToString();
            string strSQL = "select Menu_ID,Menu_Name from UDS_Menu where Super_Menu_ID=" + int.Parse(id);
            DataSet ds = dm.getsql(strSQL);
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                CityCounty c = new CityCounty();
                c.Menu_ID = Convert.ToInt32(ds.Tables[0].Rows[i]["Menu_ID"].ToString());
                c.Menu_Name = ds.Tables[0].Rows[i]["Menu_Name"].ToString();
                list.Add(c);
            }
            Response.Write(list.ToJson());
            Response.End();
        }
    }
}

 

posted @ 2012-12-19 14:24  Mark1997  阅读(385)  评论(0)  编辑  收藏  举报