Jquery实现无刷新DropDownList联动

 随着Jquery1.4的发布，Jquery运用越来越多了，让我们来实现以前经常用到的DropDownList无刷新联动。

先看HTML,我们引用Jquery,放两个DropDownList:

<style type="text/css">

           #ddlEmployeeCars 

         {

              display:none;

            position:absolute;

               top:50px;

             left:9px;

        }

      </style>

     <script language="javascript" type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>     

  

   　　 <asp:DropDownList ID="ddlEmployee" runat="server" AppendDataBoundItems="true">

                <asp:ListItem Text="(Please Select)" Value="0" Selected="True" />

           </asp:DropDownList>

           <asp:DropDownList ID="ddlEmployeeCars" runat="server">

            </asp:DropDownList>

接着写核心的Script:

 <script language="javascript" type="text/javascript">

             $(function() {

               var $ddl = $("select[name$=ddlEmployee]");

                var $ddlCars = $("select[name$=ddlEmployeeCars]");

                 $ddl.focus();

                $ddl.bind("change keyup", function() {

                   if ($(this).val() != "0") {

                       loadEmployeeCars($("select option:selected").val());                    

                        $ddlCars.fadeIn("slow");

                    } else {

                        $ddlCars.fadeOut("slow");

                    }
            });

            });

   

           function loadEmployeeCars(selectedItem) {

                $.ajax({

                   type: "POST",

                   url: "Default.aspx/FetchEmployeeCars",

                   data: "{id: " + selectedItem + "}",

                  contentType: "application/json; charset=utf-8",

                    dataType: "json",

                   async: true,

                    success: function Success(data) {

                        printEmployeeCars(data.d);

                   }

                });

            }        

    

           function printEmployeeCars(data) {

                $("select[name$=ddlEmployeeCars] > option").remove();

                for (var i = 0; i < data.length; i++) {

                 $("select[name$=ddlEmployeeCars]").append(

                        $("<option></option>").val(data[i].Id).html(data[i].Car)

                    );

               }

           }       

       </script>

非常简单，检查值是不是０，然后ajax传值到server，成功后remove掉原来的option,append新的option.

看下WebPage的code:

 public partial class _Default : System.Web.UI.Page

        {

            [WebMethod]

           public static List<EmployeeCar> FetchEmployeeCars(int id)

            {

                 var emp = new EmployeeCar();

                 return emp.FetchEmployeeCars(id);

            }

      

            protected void Page_Load(object sender, EventArgs e)

            {

                if (!IsPostBack)

               {

                   var employees = new Employee();

                    ddlEmployee.DataSource = employees.FetchEmployees();

                    ddlEmployee.DataTextField = "Surname";

                   ddlEmployee.DataValueField = "Id";

                   ddlEmployee.DataBind();

                }

            }
     }

我们的Datasource class:

 public class EmployeeCar

       {

           public int Id { get; set; }

           public string Car { get; set; }

     

           private static List<EmployeeCar> LoadData()

            {

                return new List<EmployeeCar>

                            {

                              new EmployeeCar {Id = 1, Car = "Ford"},

                             new EmployeeCar {Id = 1, Car = "Holden"},

                              new EmployeeCar {Id = 1, Car = "Honda"},

                               new EmployeeCar {Id = 2, Car = "Toyota"},

                              new EmployeeCar {Id = 2, Car = "General Motors"},

                               new EmployeeCar {Id = 2, Car = "Volvo"},

                              new EmployeeCar {Id = 3, Car = "Ferrari"},

                              new EmployeeCar {Id = 3, Car = "Porsche"},

                               new EmployeeCar {Id = 3, Car = "Ford2"}

                          };

            }

    

           public List<EmployeeCar> FetchEmployeeCars(int id)

            {

               return (from p in LoadData()

                      where p.Id == id

                       select p).ToList();

            }

     }

  

       public class Employee

        {

           public int Id { get; set; }

           public string GivenName { get; set; }

           public string Surname { get; set; }

   

           public List<Employee> FetchEmployees()

         {

                return new List<Employee>