随着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.googleapis.com/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>

非常简单,检查值是不是0,然后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 p.Id == 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 p.Id == id
  51:                      select p).First();
  52:          }
  53:      }


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

Author: Petter Liu    http://wintersun.cnblogs.com

posted on 2010-03-08 15:50  PetterLiu  阅读(6831)  评论(4编辑  收藏  举报