JQuery和ASP.NET分别实现级联下拉框效果

Posted 笨鹤

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery和ASP.NET分别实现级联下拉框效果相关的知识，希望对你有一定的参考价值。

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

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

效果图：

技术分享     技术分享

逻辑分析图：

技术分享

html代码：

[html] view plain copy 技术分享技术分享
  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.    
  11. <body>  
  12.     <div class="car">  
  13.         <span class="carname">  
  14.             汽车厂商：  
  15.             <select>  
  16.                 <option value="">请选择汽车厂商</option>  
  17.                 <option value="BMW">宝马</option>  
  18.                 <option value="Audi">奥迪</option>  
  19.                 <option value="VW">大众</option>  
  20.             </select>  
  21.             <img src="images/pfeil.gif" alt="有数据"/>  
  22.         </span>  
  23.         <span class="cartype">  
  24.             汽车类型：  
  25.             <select></select>  
  26.         </span>     
  27.     </div>  
  28. </body>  
  29. </html>  

css代码：

[plain] view plain copy 技术分享技术分享
  1. .car {  
  2.     text-align:center;  
  3. }  
  4. .cartype{  
  5.     display:none;  
  6. }  

js代码：

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


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

效果图：

    技术分享    技术分享       技术分享

Default.aspx代码：

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

Default.aspx.cs代码：

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

DBCon.cs代码

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

3.这两种方法的比较

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

 

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

以上是关于JQuery和ASP.NET分别实现级联下拉框效果的主要内容，如果未能解决你的问题，请参考以下文章

使用 Json 和 Jquery 的 Asp.net MVC4 中的级联下拉列表不填充

asp.net jquery 用文本框添加行（克隆行）并动态下拉

安卓四级级联下拉框效果实现

使用 ajax 和 webmethod 在 asp.net 中使用 web 方法和 ajax 级联下拉列表绑定下拉数据

利用jquery.chained.remote实现多级级联

ASP.NET MVC 级联下拉菜单