ASP.NET——兩個下拉框來實現動態聯動

介紹：

      在網頁中。我們常常會遇到下圖中的情況。首先在下拉框中選擇所在的省。選擇之后，第二個下拉框會自己主動載入出該省中的市。這樣設計極大的方便了用戶的查找。那這是怎樣實現的呢？

1、建立數據庫

“省”表

“市”表

2、加入控件

3、兩個下拉框分別綁定數據源

      protected void Page_Load(object sender, EventArgs e)
        {
            //推斷是否第一次進入頁面。假設是，則綁定數據庫。假設不是，則無需綁定。

            if (!this.IsPostBack)
            {
                //綁定省   

                SqlConnection con = DB.createConnection();
                con.Open();
                string cmdText = "select* from province";
                SqlCommand cmd = new SqlCommand(cmdText, con);
                SqlDataReader sdr = cmd.ExecuteReader();
                this.DropDownList1.DataSource = sdr;
                this.DropDownList1.DataTextField = "proName";//文本內容
                this.DropDownList1.DataValueField = "proID"; //數據源字段
                this.DropDownList1.DataBind();
                sdr.Close();

                //綁定市
                string cmdCityText = "select* from city where proID=" + this.DropDownList1.SelectedValue;
                SqlCommand cmdCity = new SqlCommand(cmdCityText, con);
                sdr = cmdCity.ExecuteReader();
                //剩下部分與綁定省相似，略
               
                //關閉連接
                con.Close();
            }
        }
  

到這里。兩個文本框都已經載入到各自的數據。剩下的就是動態聯動了。

4、當我們更改第一個下拉框中的內容后，會觸發第一個文本框的SelectedIndexChanged事件。將第一個下拉框的proID（省的ID）作為參數，就可以查到其市的內容。

詳細代碼例如以下：

 protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            //省的ID
            string proID = this.DropDownList1.SelectedValue;
            SqlConnection con = DB.createConnection();
            con.Open();

            SqlCommand cmd = new SqlCommand("select * from city where proID=" + proID, con);
            SqlDataReader sdr = cmd.ExecuteReader();
            //綁定
            this.DropDownList2.DataSource = sdr;
            this.DropDownList2.DataTextField = "cityName";
            this.DropDownList2.DataValueField = "cityID";
            this.DropDownList2.DataBind();
            sdr.Close();
            con.Close();
        }

       這樣。我們就能夠實現動態聯動了。

這種動態聯動，一般由多個下拉框組成一組菜單，比方上面用到的兩個下拉框。下拉菜單之間有聯動的關系。

當上級的選中項發生改變時，下級會依據上級中的選中項顯示對應的內容。

      盡管僅僅是一個小技巧或者說是小的需求，但當數據量特別大時。它的功能就不可小視了。上次期末考試導考生的時候，可能僅僅是一個頁面忽略了這個功能，結果導致工作量大大添加。

      用了動態聯動之后。當面對龐大的數據或復雜的分類時，頁面的載入速度也不會受到影響，也方便了用戶找到。

版權聲明：本文博客原創文章，博客，未經同意，不得轉載。