在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. Angularjs与bootstrap.datetimepicker结合实现日期选择器

    http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...

  2. pip安装简单方法

    前提:有网络 wget -c --no-check-certificate https://bootstrap.pypa.io/get-pip.py python get-pip.py

  3. 【转】ArrayList其实就那么一回事儿之源码浅析

    转自:http://www.cnblogs.com/dongying/p/4013271.html?utm_source=tuicool&utm_medium=referral ArrayLi ...

  4. mysql性能优化-简易版

    mysql性能优化 sql语句优化 如何发现有问题的sql? 开启mysql慢查询 show variables like 'slow_query_log' set global slow_query ...

  5. UIScrollView 的 delaysContentTouches

    UIScrollView 的一段说明: Because a scroll view has no scroll bars, it must know whether a touch signals a ...

  6. eclipse中手动导入DTD文件的方式

    DTD一般应用在应用程序中定义数据交换类型的文档,一般用在xml配置文件中,有些时候在eclipse中并不能加载一些提示,这个时候需要手动导入,导入方法如下: 1.首先根据声明的网址下载.dtd的文件 ...

  7. ABAP 仓库理货单导出

    *&---------------------------------------------------------------------* *& Report   *& ...

  8. Linux内存管理原理

    本文以32位机器为准,串讲一些内存管理的知识点. 1. 虚拟地址.物理地址.逻辑地址.线性地址 虚拟地址又叫线性地址.linux没有采用分段机制,所以逻辑地址和虚拟地址(线性地址)(在用户态,内核态逻 ...

  9. cocos2d-x 第一篇 环境搭建

    官网:http://www.cocos2d-x.org/ 下载一个稳定版的cocos2d-x (网址:http://download.cocos2d-x.org/ Github Repository ...

  10. JS不用通过其他转换两个小数加减得到正确答案

    之前写过一篇文章js比较两个属于float类型的小数,都需要通过某种函数转换下,太麻烦了,比如: 减法:10.2345-0.01=10.2245,这是正确的答案,但是当你做加法的时候就变了 加法:10 ...