在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框架里面的示例代码：

 <h2 class="contentTitle">下拉菜单</h2>

 <div class="pageContent" layoutH="56">

 <select class="combox" name="province" ref="w_combox_city" refUrl="demo/combox/city_{value}.html">

 <option value="all">所有省市</option>

 <option value="bj">北京</option>

 <option value="sh">上海</option>

 </select>

 <select class="combox" name="city" id="w_combox_city" ref="w_combox_area" refUrl="demo/combox/area_{value}.html">

 <option value="all">所有城市</option>

 </select>

 <select class="combox" name="area" id="w_combox_area">

 <option value="all">所有区县</option>

 </select>

 </div>

服务器端返回格式：

 [

  ["all", "所有城市"],

  ["bj", "北京市"]

 ]

根据以上可以看出，combox的工作模式是这样的，当一级菜单的某个选项选中时，就会执行相应的refUrl=“X.action"，通过服务器返回json格式的页面后，并根据一级菜单中定义的ref="XXX"来寻找二级菜单中id=“XXX”,将返回的json页面放入二级菜单中，与此同时，如果还有三级菜单的话，由于二级菜单的数据的改变，二级菜单中也会执行其相应的refUrl，随后服务器同样返回json格式页面，寻找与ref匹配的id三级菜单进行联动..以此类推。

下面我就简单写了个例子给大家演示以下一个二级动态联动效果：

1）首先我新建了一个index.aspx页面，这是前台html代码：

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="main" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

 <title></title>

 </head>

 <body>

 <form id="form1" runat="server">

 <div>

 <select class="combox" id="province" name="province" ref="w_combox_city" refUrl="SelectList.ashx?id={value}" runat="server">

 <option value="all">所有类型</option>

 </select>

 <select class="combox" name="city" id="w_combox_city">

 </select>

 </div>

 </form>

 </body>

 </html>

2）后台代码：后台绑定第一个<select>下拉框代码如下：

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using System.Web.UI;

 using System.Web.UI.WebControls;

 using System.Data;

 using System.Data.SqlClient;

 public partial class main : System.Web.UI.Page {

 protected void Page_Load(object sender, EventArgs e) {

  bind();

  }

 ///<summary>

 ///绑定select下拉列表

 ///</summary>

 private void bind() {

 string sql = "Data Source=.;Initial Catalog=FLKWeb;UID=sa;pwd=sa";

 SqlConnection conn = new SqlConnection(sql);

 string selectStr = "select * from ProBiginfo";

  conn.Open();

 SqlCommand cmd = new SqlCommand(selectStr, conn);

 SqlDataAdapter da = new SqlDataAdapter(cmd);

 DataTable dt = new DataTable();

  da.Fill(dt);

 for (int i = ; i < dt.Rows.Count; i++) {

 ListItem li = new ListItem();

 li.Text = dt.Rows[i]["BigClass"].ToString();

 li.Value = dt.Rows[i]["ProInfoID"].ToString();

 this.province.Items.Add(li);

  }

  }

 }

3）最后就是选择第一个下拉框里面任何一个值会执行refUrl变量，根据上面分析combox工作模式，服务器段会返回一个json格式，我通过建了一般处理程序页面SelectList.ashx实现的。如下：

 <%@ WebHandler Language="C#" Class="SelectList" %>

 using System;

 using System.Collections;

 using System.Configuration;

 using System.Data;

 using System.Linq;

 using System.Web;

 using System.Web.Security;

 using System.Web.UI;

 using System.Web.UI.HtmlControls;

 using System.Web.UI.WebControls;

 using System.Web.UI.WebControls.WebParts;

 using System.Xml.Linq;

 using System.Data.SqlClient;

 using System.Text;

 public class SelectList : IHttpHandler {

 public string bigid;

 public void ProcessRequest(HttpContext context) {

 context.Response.ContentType = "application/octet-stream";

 bigid = context.Request["id"];

  context.Response.Write(GetGoodsName(bigid));

  }

 /// <summary>

 /// 二级联动

 /// </summary>

 /// <returns></returns>

 private string GetGoodsName(string BigID) {

 string sql = "Data Source=.;Initial Catalog=FLKWeb;UID=sa;pwd=sa";

 SqlConnection conn = new SqlConnection(sql);

 string selectStr = "select * from ProSinfo where BigClassID='" + BigID + "'";

 SqlCommand cmd = new SqlCommand(selectStr, conn);

 StringBuilder sbGoodsName = new StringBuilder();

 sbGoodsName.Append("[[\"-1\",\"==请选择类型==\"]");

  conn.Open();

 SqlDataReader dr = cmd.ExecuteReader();

 while (dr.Read()) {

 sbGoodsName.Append(",[");

 sbGoodsName.Append("\"" + dr["SmallID"].ToString() + "\",");

 sbGoodsName.Append("\"" + dr["ClassName"].ToString() + "\"");

 sbGoodsName.Append("]");

  }

  dr.Close();

  conn.Close();

 sbGoodsName.Append("]");

 return sbGoodsName.ToString();

  }

 public bool IsReusable {

 get {

 return false;

  }

  }

 }

运行就实现动态联动效果了，效果如下：

Dwz下拉菜单的二级联动的更多相关文章

  1. JS实现下拉单的二级联动

    因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...

  2. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  3. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  4. Excel应用----制作二级下拉菜单【转】

    应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...

  5. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  6. phpcms v9 下拉菜单 二级 三级子栏目调用方法

    很多网站的导航栏可以实现下拉二级菜单,三级菜单等效果,今天我们就来分享phpcms v9 支持下拉菜单的方法,可以支持无限子栏目调用,具体写法如下: <ul> {pc:content ac ...

  7. 纯CSS3实现宽屏二级下拉菜单

    今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...

  8. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  9. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

随机推荐

  1. ios nsdataformatter奇怪的问题

    用nsdataformatter在中文格式下测试, a 标识的是上午,下午,不是AM,pm. 我在24小时格式的机器上测试,存入了一个 时间,却解析不出来了! static NSString *Hom ...

  2. 多线程BackroundWorker 使用

    参考文章:http://www.cnblogs.com/inforasc/archive/2009/10/12/1582110.html using System; using System.Coll ...

  3. Binary String Matching

    问题 B: Binary String Matching 时间限制: 3 Sec  内存限制: 128 MB提交: 4  解决: 2[提交][状态][讨论版] 题目描述 Given two strin ...

  4. C#文本选中及ContextMenuStrip菜单使用

    '文本框选中显示'TextBox1.SelectAll()选择所有文本'textBox1.Text.Insert(start,strInsertText)指定位置添加文本1 Private Sub T ...

  5. 【编程题目】一个整数数组，长度为 n，将其分为 m 份，使各份的和相等，求 m 的最大值★★ （自己没有做出来！！）

    45.雅虎(运算.矩阵): 2.一个整数数组,长度为 n,将其分为 m 份,使各份的和相等,求 m 的最大值 比如{3,2,4,3,6} 可以分成 {3,2,4,3,6} m=1; {3,6}{2,4 ...

  6. 模拟操作网页 webBrowser

    C# 获取IFrame中body元素 (winform) 方法1. 找出iframe的b.html的src , 利用webbrowser去加载b.html HtmlElementCollection ...

  7. 用线框模式绘制多边形 glPolygonMode

    glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); glBegin(GL_TRIANGLES);//开始以g_ViewMode模式绘制 glColor3ub(182. ...

  8. c++中有些重载运算符为什么要返回引用

    事实上,我们的重载运算符返回void.返回对象本身.返回对象引用都是可以的,并不是说一定要返回一个引用,只不过在不同的情况下需要不同的返回值. 那么什么情况下要返回对象的引用呢? 原因有两个: 允许进 ...

  9. Mysql tablespace

    对于innodb引擎的独立表空间,参考:http://blog.csdn.net/imzoer/article/details/8287938, 关键有两个变量:innodb_file_per_tab ...

  10. php导出excel封装类

    因为实际情况的需要,导出excel表格在后台开发的过程中会经常用到.下面是我在实际应用中自己整理的一个导出excel类,需要PHPExcel支持,本类很好的完成导出表格的基本样式,保存路径,切换工作薄 ...