联动菜单，即组合框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. STM32 HAL库学习系列第4篇 定时器TIM----- 开始定时器与PWM输出配置

    基本流程: 1.配置定时器 2.开启定时器 3.动态改变pwm输出,改变值  HAL_TIM_PWM_Start(&htim4, TIM_CHANNEL_1); 函数总结: __HAL_TIM ...

  2. s3c6410 RomCode文档读后总结

    最近无意中看到一篇关于s3c6410 RomCode的介绍,结合自己的经验,做个总结. 首先贴张图,具体描述下该芯片的启动方式及具体流程. 因为s3c6410的板子多数是从SD或者Nand方式启动,重 ...

  3. python-类(1)

    ·类(Class) 笔记: Python是一种面向对象(Object Oriented)的编程语言,类(Class)是Python的核心概念.在Python中,不管是列表.字符串.函数和类都是对象. ...

  4. 从零开始搭建vue移动端项目到上线的步骤

    初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...

  5. Go 跨域请求问题

    在使用go语言写测试服务的时候遇到了前端跨域请求问题,只需在go中加入 w.Header().Set("Access-Control-Allow-Origin", "*& ...

  6. scala (1) for 循环

    scala if  else 判断 (1)在scala中末尾不需要添加 分号 作为语句的终结符.  val  name = "Leo" (2)  在 scala 中 if else ...

  7. 用树莓派和DS18B20做个汽车温度记录仪[原创]

    用树莓派和DS18B20做个汽车温度记录仪[原创] 很想知道夏日阳光暴晒下,汽车内的最高温度以及温度的变化情况.觉得用树莓派和DS18B20来实现应该很简单,于是就尝试捣鼓了一下,半天时间就搞定了,写 ...

  8. 以太坊入门-solidity环境搭建

    本地remix-ide安装教程 一 开始安装前 准备以下软件 vs2015(主要会用到vc++的工具以及Windows sdk  ||vs2017没试过,不过应该可以) vs下载安装以及解压地址: h ...

  9. ASP.NET 并发控制

    当多个用户试图同时修改数据时,需要建立控制机制来防止一个用户的修改对同时操作的其他用户所作的修改产生不利的影响.处理这种情况的系统叫做“并发控制”. 并发控制的类型 通常,管理数据库中的并发有三种常见 ...

  10. mybash的编写与调试

    fork() 计算机程序设计中的分叉函数.返回值: 若成功调用一次则返回两个值,子进程返回0,父进程返回子进程标记:否则,出错返回-1. fork函数将运行着的程序分成2个(几乎)完全一样的进程,每个 ...