在学习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. python_sort(key=) 的使用

    """ sort() 函数内含有 key 可以指定相关的函数来作为排序依据 比如这里指定每一项的索引为1 的元素作为排序依据 默认是以第一个作为排序依据 "&q ...

  2. 【Gym 100971G】Repair

    BUPT 2017 summer training (for 16) #1B 题意 Alex is repairing his country house. He has a rectangular ...

  3. 【Tsinsen A1039】【bzoj2638】黑白染色 （BFS树）

    Descroption 原题链接 你有一个\(n*m\)的矩形,一开始所有格子都是白色,然后给出一个目标状态的矩形,有的地方是白色,有的地方是黑色,你每次可以选择一个连通块(四连通块,且不要求颜色一样 ...

  4. bit、Byte、bps、Bps、pps、Gbps的单位详细说明及换算

    1. bit 电脑记忆体中最小的单位,在二进位电脑系统中,每1bit 可以代表0 或 1 的数位讯号. 2. Byte 字节单位,一般表示存储介质大小的单位,一个B(常用大写的B来表示Byte)可代表 ...

  5. Android 开发中 SQLite 数据库的使用

    SQLite 介绍 SQLite 一个非常流行的嵌入式数据库,它支持 SQL 语言,并且只利用很少的内存就有很好的性能.此外它还是开源的,任何人都可以使用它.许多开源项目((Mozilla, PHP, ...

  6. 用c#查询各快递物流信息

    前面介绍过<用快递100接口查询各快递物流信息>,里面用的是API接口,但有些快递不支持这种方式,本文介绍的HtmlAPI支持所有快递公司. 支持包括EMS.邮政.顺丰和申通在内的所有公司 ...

  7. Atlantis HDU - 1542 （扫描线，线段树）

    扫描线的模板题,先把信息接收,然后排序,记录下上边和下边,然后用一条虚拟的线从下往上扫.如果我扫到的是下边,那么久用线段树在这个区间内加上1,表示这个区间现在是有的,等我扫描到上边的时候在加上-1,把 ...

  8. Jupyter-Notebook服务器自定义密码

    往期回顾 Anaconda安装:https://www.cnblogs.com/dotnetcrazy/p/9158715.html 基本知识导航篇:https://www.cnblogs.com/d ...

  9. 为什么分布式一定要有redis?

    为什么分布式一定要有redis? 孤独烟 架构师小秘圈 昨天 作者:孤独烟 来自:http://rjzheng.cnblogs.com/ 1.为什么使用redis   分析:博主觉得在项目中使用red ...

  10. goaccess nginx 日志分析

    用法介绍 GoAccess的基本语法如下: goaccess [ -b ][ -s ][ -e IP_ADDRESS][ - a ] <-f log_file > 参数说明: -f – 日 ...