在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现，现在学习了JQuery，知道了JQuery和select也能实现。我分别举两个小例子说明这两种方法如何实现.

1.用JQuery和select来实现汽车厂商和汽车类型的联动

效果图：

     

逻辑分析图：

html代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>级联下拉框效果</title>
  6. <link rel="stylesheet" type="text/css" href="css/chainselect.css">
  7. <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
  8. <script language="javascript" type="text/javascript" src="js/chainselect.js"></script>
  9. </head>
  10. <body>
  11. <div class="car">
  12. <span class="carname">
  13. 汽车厂商：
  14. <select>
  15. <option value="">请选择汽车厂商</option>
  16. <option value="BMW">宝马</option>
  17. <option value="Audi">奥迪</option>
  18. <option value="VW">大众</option>
  19. </select>
  20. <img src="data:images/pfeil.gif" alt="有数据"/>
  21. </span>
  22. <span class="cartype">
  23. 汽车类型：
  24. <select></select>
  25. </span>
  26. </div>
  27. </body>
  28. </html>

css代码：

  1. .car {
  2. text-align:center;
  3. }
  4. .cartype{
  5. display:none;
  6. }

js代码：

  1. $(document).ready(function(){
  2. //找到下拉框
  3. var carnameSelect = $(".carname").children("select");
  4. var cartypeSelect = $(".cartype").children("select");
  5. //给下拉框注册事件
  6. carnameSelect.change(function(){
  7. var carnameValue = $(this).val();
  8. if( carnameValue != ""){
  9. //carnameValue不为空的情况接着判断
  10. if(!carnameSelect.data(carnameValue)){
  11. //不在缓冲区中,需要向服务器请求
  12. $.post("ChainSelect",{keyword:carnameValue,type:"top"},function(data){
  13. if (data.length != 0){
  14. //返回的数据不为空
  15. cartypeSelect.html("");
  16. $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
  17. for(var i = 0;i < data.length; i++ ){
  18. $("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(cartypeSelect);
  19. }
  20. cartypeSelect.parent().show();
  21. carnameSelect.next().show();
  22. }else{
  23. //返回的数据为空
  24. cartypeSelect.parent().hide();
  25. carnameSelect.next().hide();
  26. }
  27. carnameSelect.data(carnameValue,data);
  28. },"json");
  29. }else{
  30. //在缓冲区中
  31. var data = carnameSelect.data(carnameValue);
  32. if (data.length != 0){
  33. //返回的数据不为空
  34. cartypeSelect.html("");
  35. $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
  36. for(var i = 0;i < data.length; i++ ){
  37. $("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(cartypeSelect);
  38. }
  39. cartypeSelect.parent().show();
  40. carnameSelect.next().show();
  41. }else{
  42. //返回的数据为空
  43. cartypeSelect.parent().hide();
  44. carnameSelect.next().hide();
  45. }
  46. }
  47. }else{
  48. //carnameValue为空的情况，隐藏第二个下拉框
  49. cartypeSelect.parent().hide();
  50. carnameSelect.next().hide();
  51. }
  52. });
  53. });

2.用ASP.NET控件实现部门和员工的联动

效果图：

     
     

Default.aspx代码：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. </head>
  8. <body>
  9. <form id="form1" runat="server">
  10. <div>
  11. <asp:DropDownList ID="ddlDep" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlDep_SelectedIndexChanged">
  12. </asp:DropDownList>
  13. <br />
  14. <asp:ListBox ID="lBoxEmp" runat="server"></asp:ListBox>
  15. </div>
  16. </form>
  17. </body>
  18. </html>

Default.aspx.cs代码：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data.SqlClient;
  8. public partial class _Default : System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e)
  11. {
  12. if (!this.IsPostBack)
  13. {
  14. SqlConnection con = DBCon.createConnection();
  15. con.Open();
  16. //显示部门
  17. SqlCommand cmd = new SqlCommand("select * from Tdepartment", con);
  18. SqlDataReader sdr = cmd.ExecuteReader();
  19. this.ddlDep.DataSource = sdr;
  20. this.ddlDep.DataTextField = "depName";
  21. this.ddlDep.DataValueField = "depID";
  22. this.ddlDep.DataBind();
  23. sdr.Close();
  24. //显示员工
  25. SqlCommand cmdEmp =new SqlCommand ("select * from emp where depID=" + this.ddlDep .SelectedValue ,con);
  26. SqlDataReader sdrEmp = cmdEmp.ExecuteReader();
  27. while (sdrEmp.Read())
  28. {
  29. this.lBoxEmp.Items.Add (new ListItem(sdrEmp.GetString(1),sdrEmp .GetInt32 (0).ToString ()));
  30. }
  31. sdrEmp.Close();
  32. //关闭连接
  33. con.Close();
  34. }
  35. }
  36. protected void ddlDep_SelectedIndexChanged(object sender, EventArgs e)
  37. {
  38. this.lBoxEmp.Items.Clear();
  39. SqlConnection con = DBCon.createConnection();
  40. con.Open();
  41. SqlCommand cmdEmp = new SqlCommand("select * from emp where depID=" + this.ddlDep.SelectedValue, con);
  42. SqlDataReader sdrEmp = cmdEmp.ExecuteReader();
  43. while (sdrEmp.Read())
  44. {
  45. this.lBoxEmp.Items.Add(new ListItem(sdrEmp.GetString(1), sdrEmp.GetInt32(0).ToString()));
  46. }
  47. sdrEmp.Close();
  48. //关闭连接
  49. con.Close();
  50. }
  51. }

DBCon.cs代码

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Data.SqlClient;
  6. /// <summary>
  7. /// DBCon 的摘要说明
  8. /// </summary>
  9. public class DBCon
  10. {
  11. public DBCon()
  12. {
  13. //
  14. // TODO: 在此处添加构造函数逻辑
  15. //
  16. }
  17. public static SqlConnection createConnection()
  18. {
  19. SqlConnection con = new SqlConnection("server=.;database=department;uid=sa;pwd=123456");
  20. return con;
  21. }
  22. }

3.这两种方法的比较

使用Asp.net控件实现比较简单，但在大量用户使用的情况下最好不要使用，不断向服务器请求会给服务器带来很大的负担。使用JQuery和ajax实现可以有动态效果，实现过程比较复杂，但有数据缓冲和ajax局部刷新可以减少服务器的负担。

本文转自http://blog.csdn.net/wangyajin333/article/details/36474545

JQuery和ASP.NET分别实现级联下拉框效果的更多相关文章

  1. jQuery无限级联下拉框插件

    自己编写jQuery插件 之 无限级联下拉框   因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...

  2. 自动补齐flexselect+级联下拉框案例

    在开发web应用时,经常遇到类似省市区级联下拉框操作,即选中省份自动级联加载该省份所有的市,选中市自动级联加载该市所有的区:假设省市区的数据量很大,此时用户想选中某市,因而要从上往下查找,可能半天都找 ...

  3. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集，ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

  4. EXCEL（1）级联下拉框

    EXCEL级联下拉框 http://jingyan.baidu.com/article/3c343ff756e0cf0d377963f9.html 在输入一些多级项目时,如果输入前一级内容后,能够自动 ...

  5. js基于json的级联下拉框

    级联下拉列表是项目中常用到的.比如省市县,比如企业性质等,做成一个js通用组件, 在静态页出来后可以直接插入,将数据和html静态页做一个解耦. 贴出来抛砖引玉吧. /** * @author sun ...

  6. JS级联下拉框

    //Ajax级联获取SDKfunction GetDropDownList(parent_ddlID, fill_dllID, url, param) {    this.pId = parent_d ...

  7. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  8. C# ,数据导出到带有级联下拉框的模板（一，模板的级联功能）

    一.首先解决如何做模板中增加级联功能 1,首先打开一个新的Excel文件,新增sheet,把分类保存在里面,如下图所示 2.回到sheet1,选中要增加下拉框的行(注意:请排除首行,首行是标题) 3. ...

  9. Struts2 级联下拉框 详解析

    目录(?)[+] 运行环境:myeclipse8.6+jboss5.1+jvm1.6 先看最后目录结构: 直接上源码: complexFormTag.jsp: <%@ page language ...

随机推荐

  1. SCOI 2015 Day1 简要题解

    「SCOI2015」小凸玩矩阵 题意 一个 \(N \times M\)( $ N \leq M $ )的矩阵 $ A $,要求小凸从其中选出 $ N $ 个数,其中任意两个数字不能在同一行或同一列, ...

  2. Android 播放Gif 动画

    在Android 中是不支持直接使用Gif 图片关联播放帧动画,如下动画在Android 中是无法播放的: Android 提供了另外一种解决的办法,就是使用AnimationDrawable 这一函 ...

  3. Dynamic CRM 2015学习笔记（1）Azure 上安装 CRM 2015

    今天终于在Azure上安装成功了CRM 2015,下面简单介绍下安装过程,以及出现问题的解决: 一. 配置AD, 安装IIS 参考下面的link,里面有详细的配置步骤 http://www.c-sha ...

  4. HDU-6370 Werewolf（杭电多校6I）

    一群人在玩狼人杀,村民只会说真话,狼人会说真话和假话,要你求出那些人一定是村民或者那些人一定是狼人.想到了并查集不会用... 1,如果全部人都是狼人,一定可以所以一定是村民的人一定是0. 2, 加入是 ...

  5. Can DBC文件翻译

    1 引言 DBC文件描述单个CAN网络的通信.这个信息足以监测和分析网络并模拟不是物理可用的节点(剩余的总线模拟). DBC文件也可以用来开发电子控制单元的通信软件,该控制单元应该是CAN网络的一部分 ...

  6. centos7下利用httpd2.4配置svn并使用Ldap用户认证

    应用场景:Windows下有AD活动目录,类Unix系统下有Ldap,在运维开发工具平台逐步丰富的现在,统一用户管理大大便捷了管理人员. 其中不乏经典版本控制管理工具svn,与Ldap组合的用户认证方 ...

  7. 【洛谷P1082】同余方程

    题目大意:求关于 \(x\) 的同余方程 \[ax \equiv 1 \pmod {b}\] 的最小正整数解. 题解:exgcd 板子题. 代码如下 #include <bits/stdc++. ...

  8. C# http请求带请求头部分

    直接上代码 前台调用: <script type="text/javascript"> function zLoginCheck() { var Account = ' ...

  9. CMakeLists.txt使用

    背景:C++代码在编译的过程中需要进行文件的包含,该文主要介绍CMakeLists.txt相关语法 CMake之CMakeLists.txt编写入门

  10. 系统API执行没效果，可以检查一下是否与 360安全卫士 有关？！

    今天在写一个工具软件,使用到一个系统API: mouse_event() 代码如下: mouse_event(MOUSEEVENTF_ABSOLUTE | MOUSEEVENTF_MOVE,  x2, ...