Jquery achieves the linkage of refreshing DropDownList

With the release of Jquery1.4, Jquery has been used more and more, so we can implement the DropDownList refresh linkage that we used frequently before.
Let's look at HTML first. Let's reference Jquery and put two dropdownlists:

<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>

Then write the core 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>" Maid (data [I]. Car)
);
}
}
</Script>

It is very simple. Check whether the value is 0, and then pass the value to the server through ajax. After the operation is successful, remove the original option and append the new option.
Check the 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 ();
}
}
}

Our 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 ();
}
}

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