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

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


1:   <style type="text/css">
2:          #ddlEmployeeCars
3:          {
4:              display:none;
5:              position:absolute;
6:              top:50px;
7:              left:9px;
8:          }
9:      </style>
10:      <script language="javascript" type="text/javascript" src="http:///ajax/libs/jquery/1/jquery.min.js"></script>
11:
12:     <asp:DropDownList ID="ddlEmployee" runat="server" AppendDataBoundItems="true">
13:              <asp:ListItem Text="(Please Select)" Value="0" Selected="True" />
14:          </asp:DropDownList>
15:          <asp:DropDownList ID="ddlEmployeeCars" runat="server">
16:          </asp:DropDownList>


接着写核心的Script:


1:  <script language="javascript" type="text/javascript">
2:          $(function() {
3:              var $ddl = $("select[name$=ddlEmployee]");
4:              var $ddlCars = $("select[name$=ddlEmployeeCars]");
5:              $ddl.focus();
6:              $ddl.bind("change keyup", function() {
7:                  if ($(this).val() != "0") {
8:                      loadEmployeeCars($("select option:selected").val());
9:                      $ddlCars.fadeIn("slow");
10:                  } else {
11:                      $ddlCars.fadeOut("slow");
12:                  }
13:              });
14:          });
15:
16:          function loadEmployeeCars(selectedItem) {
17:              $.ajax({
18:                  type: "POST",
19:                  url: "Default.aspx/FetchEmployeeCars",
20:                  data: "{id: " + selectedItem + "}",
21:                  contentType: "application/json; charset=utf-8",
22:                  dataType: "json",
23:                  async: true,
24:                  success: function Success(data) {
25:                      printEmployeeCars(data.d);
26:                  }
27:              });
28:          }
29:
30:          function printEmployeeCars(data) {
31:              $("select[name$=ddlEmployeeCars] > option").remove();
32:              for (var i = 0; i < data.length; i++) {
33:                  $("select[name$=ddlEmployeeCars]").append(
34:                      $("<option></option>").val(data[i].Id).html(data[i].Car)
35:                  );
36:              }
37:          }
38:      </script>


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

看下WebPage的code:


1:      public partial class _Default : System.Web.UI.Page
2:      {
3:          [WebMethod]
4:          public static List<EmployeeCar> FetchEmployeeCars(int id)
5:          {
6:              var emp = new EmployeeCar();
7:              return emp.FetchEmployeeCars(id);
8:          }
9:
10:          protected void Page_Load(object sender, EventArgs e)
11:          {
12:              if (!IsPostBack)
13:              {
14:                  var employees = new Employee();
15:                  ddlEmployee.DataSource = employees.FetchEmployees();
16:                  ddlEmployee.DataTextField = "Surname";
17:                  ddlEmployee.DataValueField = "Id";
18:                  ddlEmployee.DataBind();
19:              }
20:          }
21:      }


我们的Datasource class:


1:     public class EmployeeCar
2:      {
3:          public int Id { get; set; }
4:          public string Car { get; set; }
5:
6:          private static List<EmployeeCar> LoadData()
7:          {
8:              return new List<EmployeeCar>
9:                         {
10:                             new EmployeeCar {Id = 1, Car = "Ford"},
11:                             new EmployeeCar {Id = 1, Car = "Holden"},
12:                             new EmployeeCar {Id = 1, Car = "Honda"},
13:                             new EmployeeCar {Id = 2, Car = "Toyota"},
14:                             new EmployeeCar {Id = 2, Car = "General Motors"},
15:                             new EmployeeCar {Id = 2, Car = "Volvo"},
16:                             new EmployeeCar {Id = 3, Car = "Ferrari"},
17:                             new EmployeeCar {Id = 3, Car = "Porsche"},
18:                             new EmployeeCar {Id = 3, Car = "Ford2"}
19:                         };
20:          }
21:
22:          public List<EmployeeCar> FetchEmployeeCars(int id)
23:          {
24:              return (from p in LoadData()
25:                      where  == id
26:                      select p).ToList();
27:          }
28:      }
29:
30:      public class Employee
31:      {
32:          public int Id { get; set; }
33:          public string GivenName { get; set; }
34:          public string Surname { get; set; }
35:
36:          public List<Employee> FetchEmployees()
37:          {
38:              return new List<Employee>
39:                         {
40:                             new Employee {Id = 1, GivenName = "Tom", Surname = "Hanks"},
41:                             new Employee {Id = 2, GivenName = "Hugh", Surname = "Jackman"},
42:                             new Employee {Id = 3, GivenName = "Petter", Surname = "Liu"}
43:                         };
44:          }
45:
46:          public Employee FetchEmployee(int id)
47:          {
48:              var employees = FetchEmployees();
49:              return (from p in employees
50:                      where  == id
51:                      select p).First();
52:          }
53:      }


完了。希望这篇POST对您有帮助。

Author: Petter Liu​