Jquery implements the code for implementing the linkage of Brushless newest dropdownlist

Let's look at HTML first. Let's reference jquery and put two dropdownlists: CopyCode The Code is as follows: <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:Copy codeThe Code is as follows: <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:Copy codeThe Code is as follows: 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:Copy codeThe Code is as follows: 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 ();
}
}

Finished. I hope this post will be helpful to you.