在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. 【leetcode】Dungeon Game

    Dungeon Game The demons had captured the princess (P) and imprisoned her in the bottom-right corner ...

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

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

  3. ffmpeg-20160806-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...

  4. Effective C++ -----条款05:了解C++默默编写并调用哪些函数

    面对“内含reference成员或者含const成员”的class内支持赋值操作,你必须自己定义copy assignment操作符. 如果某个base classes将copy assignment ...

  5. HDU 4966 GGS-DDU（最小树形图）

    n个技能,每个技能有0-a[i]的等级,m个课程,每个课程需要前置技能c[i]至少达到lv1[i]等级,效果是技能d[i]达到lv2[i]等级,花费w[i]. 输出最小花费使得全技能满级(初始全技能0 ...

  6. 线条围绕 div 中心转圈 效果

    1. 用到知识: CSS:animate  ,clipe 2.原理: 用clip 属性 将div  切边 ,会出现 切边的动态效果,然后内部的div 遮住外部的div  ,流出一部分 作为边: 就是旋 ...

  7. code vs1517 求一次函数解析式（数论 纯数学知识）

    1517 求一次函数解析式  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题解  查看运行结果     题目描述 Description 相信大家都做过练 ...

  8. HTTP协议与HTML表单（再谈GET与POST的区别）

    HTTP的GET/POST方式有何区别?这是一个老生常谈的问题,但老生常谈的问题往往有一些让人误解的结论.本文将带您浅尝HTTP协议,在了 解HTTP协议的同时将会展示许多被人们忽视的内容.在掌握了H ...

  9. 【linux】学习3

    鸟哥 书的第7章 从 /home/dtest1   跳入 /home/dtest2 目录: cd  ../dtest2   注意 cd后有空格 ..后无空格 特殊目录: .    代表此层目录 .. ...

  10. 编写一个程序，求s=1+(1+2)+(1+2+3)+…+(1+2+3+…+n)的值

    编写一个程序,求s=1+(1+2)+(1+2+3)+…+(1+2+3+…+n)的值 1 #import <Foundation/Foundation.h>  2   3 int main( ...