HTML Markup
<asp:DropDownList ID="ddlFruits" runat="server">
<asp:ListItem Text="Please select" Value=""></asp:ListItem>
<asp:ListItem Text="Mango" Value="1"></asp:ListItem>
<asp:ListItem Text="Apple" Value="2"></asp:ListItem>
<asp:ListItem Text="Banana" Value="3"></asp:ListItem>
</asp:DropDownList>
Client Side OnChange event jQuery implementation
First, the following script file is inherited.
1. jquery.min.js
Then, inside the
document.ready event handler, the DropDownList has been assigned with an
jQuery change event handler.
When an item is selected in the DropDownList, the
Text and
Value part of the selected Item are fetched and displayed in
JavaScript Alert Message Box.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*= ddlFruits]").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
});
});
</script>
Screenshot
![ASP.Net DropDownList: Client Side OnChange event in jQuery]()
Demo
Downloads
