In this article I will explain with an example, how to use implement OnChange using JavaScript in ASP.Net DropDownList.
 
 

HTML Markup

The following HTML Markup consists of: DropDownList with some items. The DropDownList has been assigned with a Client Side JavaScript event handler.
<asp:DropDownList ID="ddlFruits" runat="server" onchange="OnDropDownChanged(this)">
    <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 JavaScript implementation

The following JavaScript function will be called when a DropDownList item is selected i.e. the state of the DropDownList is changed. This function accepts the DropDownList reference as parameter.
The Text part of the selected Item is fetched using innerHTML while the Value part is determined using the Value property.
Finally, the Text and Value are displayed in JavaScript Alert Message Box.
<script type="text/javascript">
    function OnDropDownChanged(ddlFruits) {
        var selectedText = ddlFruits.options[ddlFruits.selectedIndex].innerHTML;
        var selectedValue = ddlFruits.value;
        alert("Selected Text: " + selectedText + " Value: " + selectedValue);
    };
</script>
 
 

Screenshot

ASP.Net DropDownList: Client Side OnChange event in JavaScript
 
 

Demo

View Demo
 
 

Downloads

Download Code