?

?

特點：
1、?使用js方法，把需要的數據一次性寫入到頁面里，然后用js來實現聯動的效果。
2、?支持n級。
3、?封裝成了服務器控件，所以使用非常簡單。
4、?支持在回發的時候保持狀態。
5、?支持修改記錄的時候設置默認選項。
6、?頁面設置比較靈活。
7、?采用DataSet作為數據的容器。

?

缺點：
1、?由于是把需要的數據一次性寫入頁面交給客戶端，所以在網速比較慢的時候，顯示頁面需要比較長的時間。

?

可以改進的地方：
1、?引入json，可以把需要的數據放到單獨的js文件里面，這樣可以減少帶寬的壓力。
2、?Ajax，按需所取。每次只加載需要的數據。

在線演示：
　　使用省、市、區縣的數據庫進行演示。由于服務器的網速很慢，所以需要等待一下，等頁面完全下載完畢之后，才可以使用，否則會出現js腳本錯誤。頁面完全下載完畢之后就沒有js腳本錯誤了。

?

在線演示：http://demo.naturefw.com/Nonline/other/default.aspx

?

1、?二級聯動的演示
以省、市聯動為例演示。提交表單后可以保持狀態，可以設置選項。

在線演示直通：http://demo.naturefw.com/Nonline/other/UniteList02.aspx

?

?protected?void?Page_Load(object?sender,?EventArgs?e)
????????{
????????????DataAccessLibrary?dal?=?DALFactory.CreateDAL();

????????????string?sql?=?@"SELECT?AreaID?AS?id,?AreaName?AS?txt?FROM?Base_Area?WHERE?(AreaCode?LIKE?'__0000')?
????????????????????????????SELECT?ParentID,AreaID?AS?id,?AreaName?AS?txt?FROM?Base_Area?WHERE?(AreaCode?LIKE?'____00')?AND?(AreaCode?NOT?LIKE?'__0000')?";

????????????DataSet?ds?=?dal.ExecuteFillDataSet(sql);
????????????this.lst_Area.DataSource?=?ds;
????????????this.lst_Area.DataBind();
????????????
????????}

????????protected?void?btn_Save_Click(object?sender,?EventArgs?e)
????????{
????????????//提交表單后，獲取聯動下拉列表框的選項值

????????????//獲取ID
????????????string?itemID?=?this.lst_Area.SelectedValue;

????????????this.txt_Value.Text?=?itemID;

????????????//獲取text
????????????string?itemText?=?this.lst_Area.SelectedText;
????????????this.txt_Value.Text?=?itemID;

????????}

????????protected?void?btn_SetItemSelect_Click(object?sender,?EventArgs?e)
????????{
????????????//設置下拉列表框的選項
????????????string?itemID?=?this.txt_SetID.TextTrimNone;
????????????this.lst_Area.SetSelectedValue(itemID);

????????}

?

?

?

2、?三級聯動的演示
以省、市、區縣聯動為例演示。提交表單后可以保持狀態，可以設置選項。

演示直通：http://demo.naturefw.com/Nonline/other/UniteList03.aspx

（服務器的網速有點慢，網頁又有點大，所以需要一點時間下載。）

?

protected?void?Page_Load(object?sender,?EventArgs?e)
????????{
????????????DataAccessLibrary?dal?=?DALFactory.CreateDAL();

????????????string?sql?=?@"SELECT?AreaID?AS?id,?AreaName?AS?txt?FROM?Base_Area?WHERE?(AreaCode?LIKE?'__0000')?
????????????????????????????SELECT?ParentID,AreaID?AS?id,?AreaName?AS?txt?FROM?Base_Area?WHERE?(AreaCode?LIKE?'____00')?AND?(AreaCode?NOT?LIKE?'__0000')?
????????????????????????????SELECT?ParentID,AreaID?AS?id,?AreaName?AS?txt?FROM?Base_Area?WHERE?(AreaCode?NOT?LIKE?'__0000')?AND?(AreaCode?NOT?LIKE?'____00')?";

????????????DataSet?ds?=?dal.ExecuteFillDataSet(sql);
????????????this.lst_Area.DataSource?=?ds;
????????????this.lst_Area.DataBind();

????????}

?

?

與二級聯動的代碼相對比，只是SQL語句的地方不同，即多了一條SQL語句。其他的都是一樣的。同理，如果是四級的，那么就在多一條SQL語句。

n級聯動，那么就需要n條SQL語句。

?

?

3、?修改記錄演示
一般在修改記錄的時候，需要根據記錄里的信息設置列表框的選項，這里演示了這種功能。

演示直通：http://demo.naturefw.com/Nonline/other/UniteListUpdate.aspx?

?

增加下面這樣的代碼即可。

?if?(!Page.IsPostBack)
????????????{
????????????????//6,568,572?是“遼寧省,撫順市,望花區”對于的ID
????????????????//實際項目中，是從數據庫里獲取，然后設置，這里只是一個實例
????????????????this.lst_Area.SetSelectedValue("6,568,572");?
????????????}

?

?

4、?頁面修飾演示
您看了上面的演示，可呢會覺得幾個下拉列表框挨在一起太難看了，這里演示如何來做修飾。這個可以在下拉列表框的前面，加上一些修飾。

演示直通：http://demo.naturefw.com/Nonline/other/UniteListHTML.aspx

?

?protected?virtual?void?SetHTML()
????????{
????????????//一行里，下拉列表框前面加說明的方法
????????????string[]?html?=?new?string[6];
????????????html[0]?=?"省份：";
????????????html[2]?=?"城市：";
????????????html[4]?=?"區/縣：";

????????????this.lst_Area.ListHTML?=?html;
????????}

?

?

5、?Table形式的表單
在表單里，如果是table形式的話，一行里只想顯示一個列表框，那么要如何設置呢？

演示直通：http://demo.naturefw.com/Nonline/other/UniteListHTML_table.aspx

?

省份、城市、區縣各占一行的形式。

?

?protected?override?void?SetHTML()
????????{
????????????//多行表格的方法
????????????string[]?html?=?new?string[6];
????????????html[0]?=?"";
????????????html[1]?=?"</td></tr>";
????????????html[2]?=?"<tr><td?align=\"right\">城市：</td><td>";
????????????html[3]?=?"</td></tr>";
????????????html[4]?=?"<tr><td?align=\"right\">區/縣：</td><td>";

????????????this.lst_Area.ListHTML?=?html;
????????}

?

?

6、?Div形式的表單
在表單里，如果是div形式，一行里只想顯示一個列表框，那么又要如何設置呢？
演示直通：http://demo.naturefw.com/Nonline/other/UniteListHTML_div.aspx?

?

?

省份、城市、區縣各占一行的形式。

?

?

protected?override?void?SetHTML()
????????{
????????????//多行表格的方法
????????????string[]?html?=?new?string[6];
????????????html[0]?=?"";
????????????html[1]?=?"</div>";
????????????html[2]?=?"<div?class=\"formLeft\">城市：</div><div?class=\"formRight\">";
????????????html[3]?=?"</div>";
????????????html[4]?=?"<div?class=\"formLeft\">區/縣：</div><div?class=\"formRight\">";

????????????this.lst_Area.ListHTML?=?html;
????????}

?

?

注意：

　　由于控件自身并沒有保存數據，所以每次訪問的時候，都需要設置DataSource 屬性，并且需要綁定（DataBind）。這一點和一般的服務器控件不一樣。

　　設置選項的時候，需要在 if (!Page.IsPostBack) 內設置，否則無法得到用戶的選擇。

?

源碼下載：http://www.naturefw.com/down/List1.aspx?

?

?

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的【自然框架】分享 n级联动下拉列表框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。