在学习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. 【HDU-6146】Pokémon GO（dp）

    百度之星2017复赛1003 HDU-6146 Pokémon GO 题意 两行n列,只能到相邻格子,可以斜着.求遍历的方案数. 题解 dp[i]从一个点出发遍历长度i最后回到这一列的方案数 dp2[ ...

  2. 【Luogu4916】魔力环（Burnside引理，组合计数）

    考虑\(Burside\)引理,设\(f(x)\)表示置换拆成循环的个数为\(x\)时的答案,那么最终的结果就是\(\displaystyle \frac{\sum_{i=1}^n f(gcd(i,n ...

  3. input type=file上传控件老问题

    // 1.用INPUT控制上传文件时,点击INPUT控件出现文件选择框. // 2.如果在手机上使用时,一般不会出现这种较丑的 // 3.于是就自然想到将控件隐藏,然后用一个按钮代替,点击按钮时在函数 ...

  4. [POI2007]ODW-Weights(贪心)

    在byteotian公司搬家的时候,他们发现他们的大量的精密砝码的搬运是一件恼人的工作.公司有一些固定容量的容器可以装这些砝码.他们想装尽量多的砝码以便搬运,并且丢弃剩下的砝码.每个容器可以装的砝码数 ...

  5. 灰度发布/AB test

    背景 互联网产品有一个特点,就是不停的升级,升级,再升级.一般采用敏捷开发的团队,基本上保持每周一次的发布频率,系统升级总是伴随着风险,新旧版本兼容的风险,用户使用习惯突然改变而造成用户流失的风险,系 ...

  6. JS 判断各种设备，各种浏览器

    话不多说,直接看代码 1.区分Android.iphone.ipad: var ua = navigator.userAgent.toLowerCase(); if (/android|adr/gi. ...

  7. Haproxy 安装初体验

    20180916 haproxy Haproxy简介 Haproxy是一款免费的.快速的和稳定的解决方案,提供HA和LB功能,同时对基于TCP的应用和HTTP的应用进行代理,对于流量很大的web站点来 ...

  8. 爬虫之requests请求库高级应用

    1.SSL Cert Verification #证书验证(大部分网站都是https) import requests respone=requests.get('https://www.12306. ...

  9. mybatis多数据源报错

    2018-12-06 16:58:35,709 [ main ] - [ INFO ] [ org.springframework.core.KotlinDetector : 57 ] - Kotli ...

  10. windows wmi

    官网:https://msdn.microsoft.com/en-us/library/aa394132(v=vs.85).aspx WMI使用的WIN32_类库名:http://blog.csdn. ...