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

在学习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