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

随机推荐

[笔记] FireDAC DataSet 导入及导出 JSON
刚好需要将 FireDAC DataSet (TFDDataSet, TFDQuery...) 转成 JSON,网上找了一圈,原来从 XE6 开始就支持这个功能了: 储存: DataSet1.Save ...
虚拟机VMware安装linux无法上网解决办法
虚拟机VMware安装linux无法上网解决办法 Linux网络设置: 依次单击[System]-->[Preferences]-->[Network Connections],如下图 ...
jdbc之存储过程的调用和调用方法
调用存储过程调用存储过程的sql语句 {call 过程名称(参数列表)} conn = DbUtils.getConnection(); sql = "{call p_order_appr ...
python3配置文件的增删改查，记录一下
#!/usr/bin/env python3 import json #json模块,用于将像字典的字符串转换为字典 import re #re模块,查找替换 import shutil #copy文 ...
编写DVWA暴力破解High级别的Python脚本
1. 过程(不查看源代码) 使用burpsuite或者owasp zap抓取数据包,可以看出页面执行过程如下: 首先获取上一次请求的token,然后sleep几秒,最后使用get方法提交验证. 2. ...
[Java算法分析与设计]--链式堆栈的设计
在上篇文章当中,我们实现了底层为数组的顺序栈.在我之前的文章中也提到过:以数组为数据结构基础在存储数据方面需要一整块连续的内存来存放数据,一旦遇到需要可以动态扩展的功能需求时如果数据量大可能会给虚拟机 ...
install netcdf
https://gist.github.com/perrette/cd815d03830b53e24c82
ASCII, UNICODE, UTF-8, 字符集理解
字符编码的发展历史一个字节:最初一个字节的标准是混乱的,出现过4位.6位.7位的一字节标准,最终由于历史原因和物理存储需求(8位是2的3次方,方便物理存储),所以采用了8位为一个字节的标准. ASC ...
使用phpMyAdmin管理网站数据库(创建、导入、导出…)
作为一名站长,最重视的就是网站的数据安全了.本节襄阳网站优化就来讲讲如何使用phpMyAdmin管理软件进行mysql数据库的管理,实现基本的数据库管理用户.数据库的创建.数据的导入和导出操作(网站备 ...
cmake-index-3.11.4机翻
index next | CMake » git-stage git-master latest release 3.13 3.12 3.11.4 3.10 3.9 3.8 3.7 3.6 3.5 3 ...

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

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

随机推荐

热门专题