在DWZ文檔中對組合框combox的是這樣描述的：
在傳統的select 用class 定義：class=”combox”, html 擴展：保留原有屬性name, 增加了屬性：ref。
ref 屬性則是為了做級聯定義的，ref所指向的則是當前combox值改變成引起聯動的下一級combox，ref用下一級combox的id屬性來賦值。注意：一般combox沒必要設置id屬性，只要級聯時需要設置子級id等於父級ref，不同navTab和dialog中combox組件id必須唯一
以下是DWZ框架里面的示例代碼：
1 <h2 class="contentTitle">下拉菜單</h2> 2 3 <div class="pageContent" layoutH="56"> 4 <select class="combox" name="province" ref="w_combox_city" refUrl="demo/combox/city_{value}.html"> 5 <option value="all">所有省市</option> 6 <option value="bj">北京</option> 7 <option value="sh">上海</option> 8 </select> 9 <select class="combox" name="city" id="w_combox_city" ref="w_combox_area" refUrl="demo/combox/area_{value}.html"> 10 <option value="all">所有城市</option> 11 </select> 12 <select class="combox" name="area" id="w_combox_area"> 13 <option value="all">所有區縣</option> 14 </select> 15 </div>
服務器端返回格式：
1 [ 2 ["all", "所有城市"], 3 ["bj", "北京市"] 4 ]
根據以上可以看出，combox的工作模式是這樣的，當一級菜單的某個選項選中時，就會執行相應的refUrl=“X.action"，通過服務器返回json格式的頁面后，並根據一級菜單中定義的ref="XXX"來尋找二級菜單中id=“XXX”,將返回的json頁面放入二級菜單中，與此同時，如果還有三級菜單的話，由於二級菜單的數據的改變，二級菜單中也會執行其相應的refUrl，隨后服務器同樣返回json格式頁面，尋找與ref匹配的id三級菜單進行聯動..以此類推。
下面我就簡單寫了個例子給大家演示以下一個二級動態聯動效果：
1）首先我新建了一個index.aspx頁面，這是前台html代碼：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="main" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 9 </head> 10 <body> 11 <form id="form1" runat="server"> 12 <div> 13 <select class="combox" id="province" name="province" ref="w_combox_city" refUrl="SelectList.ashx?id={value}" runat="server"> 14 <option value="all">所有類型</option> 15 </select> 16 <select class="combox" name="city" id="w_combox_city"> 17 18 </select> 19 </div> 20 </form> 21 </body> 22 </html>
2）后台代碼：后台綁定第一個<select>下拉框代碼如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using System.Data; 8 using System.Data.SqlClient; 9 10 public partial class main : System.Web.UI.Page { 11 protected void Page_Load(object sender, EventArgs e) { 12 bind(); 13 } 14 ///<summary> 15 ///綁定select下拉列表 16 ///</summary> 17 private void bind() { 18 string sql = "Data Source=.;Initial Catalog=FLKWeb;UID=sa;pwd=sa"; 19 SqlConnection conn = new SqlConnection(sql); 20 string selectStr = "select * from ProBiginfo"; 21 conn.Open(); 22 SqlCommand cmd = new SqlCommand(selectStr, conn); 23 SqlDataAdapter da = new SqlDataAdapter(cmd); 24 DataTable dt = new DataTable(); 25 da.Fill(dt); 26 for (int i = 0; i < dt.Rows.Count; i++) { 27 ListItem li = new ListItem(); 28 li.Text = dt.Rows[i]["BigClass"].ToString(); 29 li.Value = dt.Rows[i]["ProInfoID"].ToString(); 30 this.province.Items.Add(li); 31 } 32 33 } 34 }
3）最后就是選擇第一個下拉框里面任何一個值會執行refUrl變量，根據上面分析combox工作模式，服務器段會返回一個json格式，我通過建了一般處理程序頁面SelectList.ashx實現的。如下：
1 <%@ WebHandler Language="C#" Class="SelectList" %> 2 3 using System; 4 using System.Collections; 5 using System.Configuration; 6 using System.Data; 7 using System.Linq; 8 using System.Web; 9 using System.Web.Security; 10 using System.Web.UI; 11 using System.Web.UI.HtmlControls; 12 using System.Web.UI.WebControls; 13 using System.Web.UI.WebControls.WebParts; 14 using System.Xml.Linq; 15 using System.Data.SqlClient; 16 using System.Text; 17 18 public class SelectList : IHttpHandler { 19 public string bigid; 20 public void ProcessRequest(HttpContext context) { 21 context.Response.ContentType = "application/octet-stream"; 22 bigid = context.Request["id"]; 23 context.Response.Write(GetGoodsName(bigid)); 24 } 25 /// <summary> 26 /// 二級聯動 27 /// </summary> 28 /// <returns></returns> 29 private string GetGoodsName(string BigID) { 30 31 string sql = "Data Source=.;Initial Catalog=FLKWeb;UID=sa;pwd=sa"; 32 SqlConnection conn = new SqlConnection(sql); 33 string selectStr = "select * from ProSinfo where BigClassID='" + BigID + "'"; 34 SqlCommand cmd = new SqlCommand(selectStr, conn); 35 StringBuilder sbGoodsName = new StringBuilder(); 36 sbGoodsName.Append("[[\"-1\",\"==請選擇類型==\"]"); 37 conn.Open(); 38 SqlDataReader dr = cmd.ExecuteReader(); 39 while (dr.Read()) { 40 sbGoodsName.Append(",["); 41 sbGoodsName.Append("\"" + dr["SmallID"].ToString() + "\","); 42 sbGoodsName.Append("\"" + dr["ClassName"].ToString() + "\""); 43 sbGoodsName.Append("]"); 44 } 45 dr.Close(); 46 conn.Close(); 47 sbGoodsName.Append("]"); 48 return sbGoodsName.ToString(); 49 } 50 public bool IsReusable { 51 get { 52 return false; 53 } 54 } 55 56 }
運行就實現動態聯動效果了，效果如下：
