《DWZ笔记一》<select>动态联动菜单

联动菜单，即组合框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>动态联动菜单的更多相关文章

jquery实现select二级联动
jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
Javascript 笔记与总结（2-12）联动菜单
联动菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
JS对select动态添加option操作（三级联动）（搜索拼接）
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
ASP.NET——两个下拉框来实现动态联动
介绍: 在网页中.我们常常会遇到下图中的情况.首先在下拉框中选择所在的省.选择之后,第二个下拉框会自己主动载入出该省中的市.这样设计极大的方便了用户的查找.那这是怎样实现的呢? 1.建立数据库 &qu ...
Ajax-ajax实例4-多级联动菜单
项目结构: 项目运行: 技术要点: 1.4.1 技术要点在分析具体的实现代码之前,先介绍一下本例的几个技术要点.1 ．选项的动态创建与删除document 对象的 createElement 方法可以 ...
easyUI combox静态动态联动
easyUI重写了select,取而代之的是combobox,有如下几种方式可以创建一个combobox 1.使用select标签,并加上class="easyui-combobox&quo ...
ASP.NET——实现两个下拉框动态联动
引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 " ...
jQuery 1.3.2 简单实现select二级联动
jQuery 1.3.2 简单实现select二级联动复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
js封装的三级联动菜单(使用时只需要一行js代码)
前言在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

随机推荐

Python学习笔记十一：模块
标准库(内置模块) time与datetime 模块时间表示方式 1.时间戳 2.格式化的字符串 3.元组形式时间戳就是一个秒数 x=time.time(),从1970年1月1日0时0分0秒到现在 ...
vs code 写C心得
用命令行的话可能比较简单: g++ -o [目标文件名] [原文件名] 然后在当前路径下直接执行这个文件,查看程序执行结果例如: g++ -o a.out test.cpp ./a.out 默认是a ...
《C语言程序设计基础1》第二学期第一周学习总结
**<C语言程序设计基础1>第二学期第一周学习总结一. 本周学习内容总结一维数组,了解了一维数组的定义(定义一个数组,需要明确数组变量名,数组元素的类型和数组大小,即数组中元素的数量) ...
ubuntu下pycharm快捷方式创建
终端输入:sudo gedit /usr/share/applications/Pycharm.desktop 粘贴模板: [Desktop Entry] Type=Application Name= ...
Linux入门——shell脚本常用信息小结
1.shell中的$默认变量 $n $1 表示第一个参数,$2 表示第二个参数 ... $# 命令行参数的个数 $0 当前 ...
20155224 2016-2017-2 《Java程序设计》第3周学习总结
20155224 2016-2017-2 <Java程序设计>第3周学习总结教材学习内容总结本周学习量比前两周大,代码量也比较多,还出现了挺多术语,都要慢慢查. 第四章第四章主要学习 ...
2017-2018-1 20155308《信息安全技术》实验二——Windows口令破解
2017-2018-1 20155308<信息安全技术>实验二--Windows口令破解实验原理口令破解主要有两种方法:字典破解和暴力破解. 字典破解是指通过破解者对管理员的了解,猜测 ...
PostgreSQL参数学习：vacuum_defer_clean_age
官方文档: http://www.postgresql.org/docs/9.3/static/runtime-config-replication.html 为了防止slave端读取数据时,因为读到 ...
day5 RHCE
19 .配置 iSCSI 服务端 (***先做这个题目**,挂载重启,机器会挂掉) 配置server0提供一个iSCSI服务磁盘名为iqn.2014-11.com.example:server0,并 ...
【LG4067】[SDOI2016]储能表
[LG4067][SDOI2016]储能表题面洛谷题解这种$n$.$m$出奇的大的题目一看就是数位$dp$啦其实就是用一下数位$dp$的套路设$f[o][n][m][k]$表示当前做到第$ ...

《DWZ笔记一》<select>动态联动菜单

《DWZ笔记一》<select>动态联动菜单的更多相关文章

随机推荐

热门专题