在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. JAVA上百实例源码以及开源项目

    简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级.中级.高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情.执着,对IT的憧憬. ...

  2. ZigZag Conversion

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  3. js 一搬问题汇总

    --有时无法进行js调试,在浏览器中设置启用脚本调试就可以了

  4. python(pyqt)开发环境搭建

    eric+pyqt 安装(python开发工具) 更多 0 Python python Eric是一个开源的.跨平台的python&ruby集成开发环境,基于python和pyqt运行.eri ...

  5. uva 401.Palindromes

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  6. SQL Server遍历表的几种方法 转载

    SQL Server遍历表的几种方法 阅读目录 使用游标 使用表变量 使用临时表 在数据库开发过程中,我们经常会碰到要遍历数据表的情形,一提到遍历表,我们第一印象可能就想到使用游标,使用游标虽然直观易 ...

  7. 【leetcode】Minimum Depth of Binary Tree (easy)

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  8. SSH框架中json传递失败

    错误截图: 这个错误乍一看无从下手,报的都是框架底层的错误,于是查阅资料得到了答案. 错误原因:struts会将action中定义的一些变量序列化转换成json格式,需要调用对象的一系列get方法,并 ...

  9. Android笔记：去除标题栏

    1: 在oncreate方法中添加requestWindowFeature(Window.FEATURE_NO_TITLE); 必须在setContentView()之前执行. 2: 在Android ...

  10. [Android Pro] Android studio jni中调用Log输出调试信息

    reference to : http://www.linuxidc.com/Linux/2014-02/96341.htm Android 开发中,java 可以方便的使用调试信息Log.i, Lo ...