webForm（三）——三級聯動

三級聯動

首先附圖一張，初步認識一下什麼是三級聯動：

                         

注：選第一個後面兩個變，選第二個，最後一個改變。

      其次，作三級聯動須要注意的方面：①DropDownList中的一個屬性——AutoPostBack：是否發生自動回傳到服務器的操做。若是把該屬性設置爲 TRUE，則啓用自動回傳，不然爲 FALSE。默認是 FALSE，在此須要true。

                                                   ②綁定數據：封裝一個抽象的方法，靈活運用

      例：web實現省市區三級聯動（方法有兩種，我的推薦第一種；第二種，代碼量多一些）

      注：在此連接數據庫的類就不作呈現，但提示一點：數據庫根據父級代號條件寫查詢 返回list<>集合。

       法一：

web中建立三個下拉列表框（DropDownList）

<form id="form1" runat="server">
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"></asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True"></asp:DropDownList>
        <asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True"></asp:DropDownList><br />
        
    </form>

CS：※SelectedIndexChanged事件：當列表控件的選定項在信息發往服務器之間變化時發生

public partial class Default3 : System.Web.UI.Page
{
    ChinaDA da = new ChinaDA();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind(DropDownList1 ,new ChinaDA().Select( "0001"));//填充省
            Bind(DropDownList2, new ChinaDA().Select(DropDownList1.SelectedValue));//填充市
            Bind(DropDownList3, new ChinaDA().Select(DropDownList2.SelectedValue));//填充區
        }
        DropDownList1.SelectedIndexChanged += DropDownList1_SelectedIndexChanged;//省改變事件
        DropDownList2.SelectedIndexChanged += DropDownList2_SelectedIndexChanged;//市改變事件
        
    }
    public void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
    {
          Bind(DropDownList3, new ChinaDA().Select(DropDownList2.SelectedValue));
    }

    public void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Bind(DropDownList2, new ChinaDA().Select(DropDownList1.SelectedValue));
        Bind(DropDownList3, new ChinaDA().Select(DropDownList2.SelectedValue));
    }

    private void Bind(DropDownList dd, List<China> list)
    {
        dd.DataSource = list;
        dd.DataTextField = "Name";
        dd.DataValueField = "Code";
        dd.DataBind();
    }
}

法二：

建立三個下拉列表框（DropDownList）

省：<asp:DropDownList ID="DropDownListsheng" runat="server" OnSelectedIndexChanged="DropDownListsheng_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
 市：<asp:DropDownList ID="DropDownListshi" runat="server" OnSelectedIndexChanged="DropDownListshi_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
 區：<asp:DropDownList ID="DropDownListqu" runat="server" AutoPostBack="True"></asp:DropDownList>

CS：※DropDownList.Items.Clear(); 每調用一次填充方法就須要請空一下，不然數據會追加

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            sheng();
            shi();
            qu();
        }          
    }
    public void sheng()//填充省
    {
        List<ChinaStates> listsheng = new ChinaStatesDA().Select("0001");
        foreach (ChinaStates cssheng in listsheng)
        {
            ListItem lisheng = new ListItem(cssheng.AreaName, cssheng.AreaCode);
            DropDownListsheng.Items.Add(lisheng);
        }
    }
    public void shi()//填充市
    {

        List<ChinaStates> listshi = new ChinaStatesDA().Select(DropDownListsheng.SelectedValue);
        foreach (ChinaStates csshi in listshi)
        {
            ListItem lishi = new ListItem(csshi.AreaName, csshi.AreaCode);
            DropDownListshi.Items.Add(lishi);
        }
    }
    public void qu()//填充區
    {

        List<ChinaStates> listqu = new ChinaStatesDA().Select(DropDownListshi.SelectedValue);
        foreach (ChinaStates csqu in listqu)
        {
            ListItem liqu = new ListItem(csqu.AreaName, csqu.AreaCode);
            DropDownListqu.Items.Add(liqu);
        }

    }
    protected void DropDownListsheng_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownListshi.Items.Clear();
        DropDownListqu.Items.Clear();
        shi();
        qu();
    }
    protected void DropDownListshi_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownListqu.Items.Clear();
        qu();
    }