联动菜单，即组合框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. php 计算两个日期相差天数

    <?php $startdate=strtotime("2013-3-09"); $enddate=strtotime("2013-4-05"); $da ...

  2. ARM设备树

    学习目标:学习设备树相关内容: 一.概念 在Linux 2.6中,ARM架构的板极硬件细节过多地被硬编码在arch/arm/plat-xxx和arch/arm/mach-xxx,在kernel中存在大 ...

  3. 一些有趣的 Shell 命令

    find . -name "*.db" -type f 查找当前路径下名称满足正则*.db的文件,-type d 则是查找文件夹 grep -rn "Main" ...

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

    20155204 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 一个原始码中可以有多个类定义,但只能有一个公开类. 留心Scanner对于每一种类型的nex ...

  5. nginx基础配置加基础实战演示

    目录 基本配置 设置用户 工作衍生进程数 错误日志存放路径 pid文件存放路径 设置最大连接数 http->server gzip 字符编码 nginx的基本格式 实战配置 虚拟主机配置 开始配 ...

  6. Qt 利用XML文档，写一个程序集合 二

    接上一篇文章https://www.cnblogs.com/DreamDog/p/9213915.html XML文档的读写 一个根节点,下面每一个子节点代表一个子程序,内容为子程序名字,图标路径,e ...

  7. OAI搭建总结

    我是参考网上的方法:oai搭建之eNB的文章, 接下来就根据自身所遇到的问题再这里总结一下步骤: 一.再官网上下载oai的文件openairinterface5g-master.zip 二.编译的过程 ...

  8. and_or_not 逻辑运算符的操作注解！

    python操作:

  9. 天下武功，无快不破，Python开发必备的6个库

    01 Python 必备之 PyPy PyPy 主要用于何处? 如果你需要更快的 Python 应用程序,最简单的实现的方法就是通过 PyPy ,Python 运行时与实时(JIT)编译器.与使用普通 ...

  10. POJ-3273(二分)

    //题意:给出农夫在n天中每天的花费,要求把这n天分作m组, //每组的天数必然是连续的,要求分得各组的花费之和应该尽可能地小,最后输出各组花费之和中的最大值. //思路:看到各组最小和最大的,果断上 ...