jquery ajax資料操作 DropDownList級聯

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1、定義一個類 CityCounty.cs檔案，如下：

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檔案，如下：

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檔案，如下：

<%@ 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>

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檔案，如下：

<%@ 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>

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More