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
  • 相关阅读:
    toString()和toLocaleString()有什么区别
    解决浏览器跨域问题
    JavaScript排序，不只是冒泡
    input disabled的情况下在IOS设备中怎么修改颜色
    jquery api 中文文档
    javascript中var that=this的意思
    JS中(function(){xxx})(); 这种写法的意思
    http-equiv 的使用
    $(function(){......})的意思
    js中(function(){…})()立即执行函数写法理解
  • 原文地址：https://www.cnblogs.com/opop/p/5344462.html
Copyright © 2011-2022 走看看