Interface code:
Copy codeThe Code is as follows: <form id = "form1" runat = "server">
<Div align = "center">
<Fieldset style = "width: 400px; height: 80px;">
<P>
Select color: </p>
<Asp: DropDownList ID = "ddlColor" runat = "server">
<Asp: ListItem Text = "--- Select ---" Value = ""> </asp: ListItem>
<Asp: ListItem Text = "red" Value = "1"> </asp: ListItem>
<Asp: ListItem Text = "yellow" Value = "2"> </asp: ListItem>
<Asp: ListItem Text = "blue" Value = "3"> </asp: ListItem>
</Asp: DropDownList>
</Fieldset>
</Div>
<Br/>
<Div align = "center" id = "message">
</Div>
</Form>
Script code:Copy codeThe Code is as follows: <script src = "Scripts/jquery-1.4.1-vsdoc.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
// Bind the keyup and change events
$ ("# <% = DdlColor. ClientID %>"). bind ("keyup change", function (){
If ($ (this). val ()! = ""){
// Note that $ (this). text () obtains the text attribute content of the entire set. Therefore, you need to filter it and obtain the selected items.
$ ("# Message "). text ("Text:" + $ (this ). find (": selected "). text () + "Value:" + $ (this ). val ());
}
Else {
$ ("# Message"). text ("");
}
});
});
</Script>
Select a color to display as follows: