【自然架構】n級下拉清單框的原理

　　其實原理也很簡單，分成兩個部分，一個是伺服器端，一個是用戶端。

　　首先要設定記錄集，這裡用DataSet來裝載，二級關聯，裡面就要有兩個DataTable；三級關聯，裡面就要有三個DataTable。同理，n級關聯就要有n個DataTable。

　　然後用第一個DataTable來綁定第一個DropDownList。第一個DropDownList是固定生成的，其他的DropDownList則是根據級數動态new出來的。

　　伺服器端會根據關聯級數來動态建立下拉清單框。就是這樣：lst = new MyDropDownList();這樣呢，做一個循環，有n級就new出來n-1個。然後在設定一些屬性，根據上一個DropDownList的第一個選項，作為過濾條件，綁定控件。這樣第一次的顯示工作就完成了。

for (i = 1; i < ds_List.Tables.Count; i++)

                {

                    dv = ds_List.Tables[i].DefaultView;

                    #region 綁定其他的清單框

                    //擷取過濾條件

                    dv.RowFilter = "ParentID=" + ParentID;

                    //定義新的下拉清單框

                    lst = new MyDropDownList();

                    lst.EnableViewState = true;

                    lst.ID = "lst" + i;

                    lst.DataTextField = "txt";

                    lst.DataValueField = "id";

                    if (str_HTML.Length > 2 * i)

                        this.Controls.Add(new LiteralControl(str_HTML[2 * i]));

                    //添加下拉清單框

                    this.Controls.Add(lst);

                    if (str_HTML.Length > 2 * i + 1)

                        this.Controls.Add(new LiteralControl(str_HTML[2 * i + 1]));

                    lst.DataSource = dv;

                    lst.DataBind();

                    //設定父ID。第一次通路，取下拉清單框的第一個選項的值

                    if (dv.Count > 0)

                        ParentID = dv[0][1].ToString();

                    else

                        ParentID = "-9999";

                    #endregion

                }

　　然後要輸出一個js的數組，當初不會json，也不喜歡xml，是以就用數組來裝載了。把這個數組輸出到頁面裡。然後用戶端的js就可以通路到需要的資料了。

　　下面說一下用戶端。用戶端是通過js的onchange函數實作關聯，原理呢就是“遞歸”。寫兩個js函數就搞定了，一個是入口函數（lst_change），另一個是結束函數（lstSelected）。

　　當第一個下拉清單框觸發了onchange函數（lst_change）的時候，會根據使用者的選項對下一個下拉清單框的item進行設定，然後判斷一下是否有下下一個下拉清單框，有的話遞歸調用lst_change（），沒有的話調用結束函數（lstSelected）。

　　這樣不管有多少個下拉清單框，都可以用這兩個js函數搞定。

　　注意點：

　　1、由于用的是伺服器控件DropDownList，他有一個“特點”，那就是在用戶端用js設定的item，在伺服器端都是不承認的。為了解決這個問題，我用了一個奔辦法，加了一個文本框，用這個文本框來儲存客戶的選項。然後送出表單，根據這個文本框裡的内容來确定客戶選擇了哪些選項。

　　

　　原來基本就是這樣。然後打算引入jQuery和json來簡化一下代碼，再然後看看能不能做成純用戶端的，就是不用伺服器控件了，直接使用 html的input。