联动菜单，即组合框Combo box，在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笔记一》<select>动态联动菜单的更多相关文章

  1. jquery实现select二级联动

    jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. Javascript 笔记与总结（2-12）联动菜单

    联动菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. JS对select动态添加option操作 （三级联动） （搜索拼接）

    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...

  4. ASP.NET——两个下拉框来实现动态联动

    介绍: 在网页中.我们常常会遇到下图中的情况.首先在下拉框中选择所在的省.选择之后,第二个下拉框会自己主动载入出该省中的市.这样设计极大的方便了用户的查找.那这是怎样实现的呢? 1.建立数据库 &qu ...

  5. Ajax-ajax实例4-多级联动菜单

    项目结构: 项目运行: 技术要点: 1.4.1 技术要点在分析具体的实现代码之前,先介绍一下本例的几个技术要点.1 ．选项的动态创建与删除document 对象的 createElement 方法可以 ...

  6. easyUI combox静态动态联动

    easyUI重写了select,取而代之的是combobox,有如下几种方式可以创建一个combobox 1.使用select标签,并加上class="easyui-combobox&quo ...

  7. ASP.NET——实现两个下拉框动态联动

    引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 " ...

  8. jQuery 1.3.2 简单实现select二级联动

    jQuery 1.3.2 简单实现select二级联动  复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  9. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

随机推荐

  1. fdisk 命令总结

    fdisk 侧重点是如何将一块硬盘,进行分区,格式化然后使用 fdisk --help 或者man fdisk可以帮助我们快速上手 划分sdb这块硬盘 1.fdisk /dev/sdb 进行分区 2. ...

  2. Dart 语言了解

    Dart 语言了解 概念 当您了解Dart语言时,请记住以下事实和概念: 您可以放在变量中的所有内容都是一个对象,每个对象都是一个类的实例.偶数,函数和 null对象.所有对象都从Object类继承. ...

  3. verilog中初值定义

    在利用verilog进行开发时,往往需要对某些寄存器进行赋初值,下面根据笔者在设计中遇到的情况进行分析. 例如下面是实现流水灯(4个led),代码如下: module ledrun ( input   ...

  4. PHP base64转换成图片

    获取base64文件 $image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASIAAAEiCAYAAABdvt+2AAAgAElEQV ...

  5. HTML页面参数的传递与获取

    传递的页面: $("#btn").click(function () { window.location.href="diancan.html?a=1"; }) ...

  6. 20155204 2016-2017-2 《Java程序设计》第2周学习总结

    20155204 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 本章主要学习了Java语言的基础语法,基本同C语言逻辑相通,比较着学不算难理解,包括了一些简 ...

  7. 20155206 2016-2017-2 《JAVA程序设计》 第二周学习总结

    20155206 2016-2017-2<JAVA程序设计>第二周学习总结 教材学习内容总结 类型 整数 字节 浮点数 字符 布尔 变量 变量在命名时,不可以使用数字或一些特殊字符:*.& ...

  8. python append extend区别

    1. 列表可包含任何数据类型的元素,单个列表中的元素无须全为同一类型. 2. append() 方法向列表的尾部添加一个新的元素. 3. 列表是以类的形式实现的.“创建”列表实际上是将一个类实例化.因 ...

  9. 【转载】OLE控件在Direct3D中的渲染方法

    原文:OLE控件在Direct3D中的渲染方法 Windows上的图形绘制是基于GDI的, 而Direct3D并不是, 所以, 要在3D窗口中显示一些Windows中的控件会有很多问题 那么, 有什么 ...

  10. RHCSA-考前准备

    1.考前准备 RHCSA classroom虚拟机和server虚拟机 将两台虚拟机切换到初始化快照 打开虚拟机电源,当出现提示时选择我已移动该虚拟机 系统密码: classroom: root As ...