asp.net jQuery Instance 8 (dynamically adding content to DropDownList) _jquery

First, prepare the page code:

Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div align= "Left" >
<fieldset style= "width:350px; height:150px ">
<p>
Choose Color </p>
<table cellpadding= "0" cellspacing= "0" border= "0" >
<tr>
<td>

</td>
<td>
<asp:dropdownlist id= "Ddlfirst" runat= "Server" >
<asp:listitem value= "" text= "---Please select---" ></asp:ListItem>
<asp:listitem value= "1" text= "Red" ></asp:ListItem>
<asp:listitem value= "2" text= "Yellow" ></asp:ListItem>
<asp:listitem value= "3" text= "Blue" ></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
&LT;TD colspan= "2" >

</td>
</tr>
<tr>
<td>

</td>
<td>
<asp:dropdownlist id= "Ddlsecond" runat= "Server" >
<asp:listitem value= "" text= "---Please select---" ></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</fieldset>
</div>
</form>

The main content is dynamically added through the Append method of jquery, the script code is as follows:

Copy Code code as follows:

<title>Recipe8</title>
<script src= "Scripts/jquery-1.4.1-vsdoc.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#ddlFirst"). Bind ("Change", function () {///Add Change Event
$ ("#ddlSecond option"). Remove (); Delete all items first to reload
$ ("#ddlSecond"). Append ("<option value=" >---Please choose---</option>);
if ($ (this). val () = 1) {
$ ("#ddlSecond"). Append ("<option value= ' > Red 1</option>");
$ ("#ddlSecond"). Append ("<option value= ' > Red 2</option>");
$ ("#ddlSecond"). Append ("<option value= ' > Red 3</option>");
}
else if ($ (this). val () = 2) {
$ ("#ddlSecond"). Append ("<option value= ' > Yellow 1</option>");
$ ("#ddlSecond"). Append ("<option value= ' > Yellow 2</option>");
$ ("#ddlSecond"). Append ("<option value= ' > Yellow 3</option>");
}
else if ($ (this). val () = 3) {
$ ("#ddlSecond"). Append ("<option value= ' > Blue 1</option>");
$ ("#ddlSecond"). Append ("<option value= ' > Blue 2</option>");
$ ("#ddlSecond"). Append ("<option value= ' > Blue 3</option>");
}
});
});
</script>

The final display effect is as follows:

Dynamically adding content can also be added in the following ways:
$ ("#ddlSecond"). Append ($ ("<option></option>"). Val ("a"). html ("Blue 1"));