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>
                       {
                           new Employee {Id = 1, GivenName = "Tom", Surname = "Hanks"},
                           new Employee {Id = 2, GivenName = "Hugh", Surname = "Jackman"},
                           new Employee {Id = 3, GivenName = "Petter", Surname = "Liu"}
                       };
        }

        public Employee FetchEmployee(int id)
        {
            var employees = FetchEmployees();
            return (from p in employees
                    where p.Id == id
                    select p).First();
        }
    }

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

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