在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. Intel项目所用jquery小知识点总结

    1.$("#tdGeo input[type='checkbox']:checked")   ---筛选出所有已经Check的Checkbox 2.$("#tdCount ...

  2. 基于隐马尔科夫模型(HMM)的地图匹配(Map-Matching)算法

    文章目录 1. 1. 摘要 2. 2. Map-Matching(MM)问题 3. 3. 隐马尔科夫模型(HMM) 3.1. 3.1. HMM简述 3.2. 3.2. 基于HMM的Map-Matchi ...

  3. ios awakeFromNib 和 initWithCoder:

    During the instantiation process, each object in the archive is unarchived and then initialized with ...

  4. 如何让ListView的item不可点击

    原文链接:http://blog.csdn.net/zhangfei_jiayou/article/details/6972752 1. 如果是listView的id是使用系统默认的id,如下, 则可 ...

  5. 禁止Linux用户登录方法

    我们在做系统维护的时候,希望个别用户或者所有用户不能登录系统,保证系统在维护期间正常运行.这个时候我们就要禁止用户登录. 1.禁止个别用户登录.比如禁止lynn用户登录. passwd -l lynn ...

  6. ghost xp 安装IIS，并配置WCF

    因要一台电脑做WCF服务的测试服务器,但只有一个台式机可能,配置就不用说了,2G内存.之前装的是win7,卡得要死.于是就想把它装回XP系统.但在网上找来找去,都是ghost xp,之前还很怕ghos ...

  7. 批处理命令——goto 和 :

    谈起goto,相信大家应该想到的是面向过程编程.其实,这就相当于当有人向你谈起class,意味着你就懂得面向对象编程.如果你不懂,那么你们的沟通将会很困难.不懂我说的啥意思吗?请参见曾经分享王路的一篇 ...

  8. jquery-validation-1.13.1 自定义验证正则

    /*** check Mobile***********************/ jQuery.validator.addMethod("isMobile", function( ...

  9. Hibernate双向一对一对象关系模型映射

    一个员工一辆车:one-to-one 实现一:让汽车表中的外键唯一 create table emp ( eid int primary key auto_increment, ename varch ...

  10. php dirname($path) 中文路径不对问题

    将$path中的\改为/ $dir=__FILE__;$dir = str_replace("\\","/", $dir);$dir=dirname($dir) ...