在学习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. rar自动压缩备份

    rem ******MySQL backup start********@echo offforfiles /p "D:\备份\发布软件备份" /m backup_*.sql -d ...

  2. CentOS下Denyhosts的安装和使用

    安装 默认yum就可以进行安装 yum install denyhosts* -y 配置 配置文件路径: /etc/denyhosts.conf ; YUM安装时其实已经配置好了大部分,我们自己稍作改 ...

  3. Nio再学习之NIO的buffer缓冲区

    1. 缓冲区(Buffer): 介绍 我们知道在BIO(Block IO)中其是使用的流的形式进行读取,可以将数据直接写入或者将数据直接读取到Stream对象中,但是在NIO中所有的数据都是使用的换冲 ...

  4. Vagrant将下载好的镜像装载到本地中

    Vagrant box add centos7 ${path}CentOS-7-x86_64-Vagrant-1803_01.VirtualBox Vagrant init ${名字} Vagrant ...

  5. JavaWeb基础之Servlet简单实现用户登陆

    学习javaweb遇到了一些坑,一些问题总结下来,记个笔记. 学习servlet遇到的一些坑: servlet实现用户登陆遇到的坑解决办法: https://www.cnblogs.com/swxj/ ...

  6. Java面试题-基础知识

    参考文章:Java面试题-基础知识 基础能力 什么是值传递和引用传递 线程状态有哪些,它们之间是如何转换的 进程与线程的区别,进程间如何通讯,线程间如何通讯? HashMap的数据结构是什么?如何实现 ...

  7. A1121. Damn Single

    "Damn Single (单身狗)" is the Chinese nickname for someone who is being single. You are suppo ...

  8. A1094. The Largest Generation

    A family hierarchy is usually presented by a pedigree tree where all the nodes on the same level bel ...

  9. [nowcoderACM_223C][区区区间间间]

    题目链接 思路 考虑用单调栈,栈顶为最大元素.当得到一个新值得时候,将这个值宇栈顶比较.因为栈顶是前面的最大元素.所以只要当前元素比栈顶大,那么肯定比前面的都大.只要将这个元素乘上前面的个数就行了. ...

  10. Vue+Django2.0 restframework打造前后端分离的生鲜电商项目（3）

    1.drf前期准备 1.django-rest-framework官方文档 https://www.django-rest-framework.org/ #直接百度找到的djangorestframe ...