zoukankan      html  css  js  c++  java

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

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

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

    效果图：

         

    逻辑分析图：


    html代码：

    [html] view plain copy 在CODE上查看代码片派生到我的代码片
    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 在CODE上查看代码片派生到我的代码片
    1. .car {  
    2.     text-align:center;  
    3. }  
    4. .cartype{  
    5.     display:none;  
    6. }  

    js代码：

    [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
    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 在CODE上查看代码片派生到我的代码片
    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 在CODE上查看代码片派生到我的代码片
    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 在CODE上查看代码片派生到我的代码片
    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
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
  • 原文地址：https://www.cnblogs.com/opop/p/5344462.html
Copyright © 2011-2022 走看看