Onchange Event In JQuery For Dropdown Example

Onchange Event In JQuery For Dropdown Example asp.net / HTML:

In this post, I am going to discuss the onchange event in jquery for dropdown for the Asp.net text box as well as the HTML textbox. If you think both controls (Asp.net and HTML) are the same then I will say no every time whenever  asp.net page runs it converted into HTML with some page life cycle (PLC) steps. If You take asp.net ControlID="ddlcountry" after page rendering it will be converted into id="ct100_ddlcountry". 

So here we need to take care of these things while calling the asp.net controls in JQuery. Let's have a look.

change Event In JQuery For Dropdown


Jquery Onchange Event with Asp.net DropDown


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#<%=ddlcountry.ClientID%>').change(function () {
                var Country_ID = $('#<%=ddlcountry.ClientID%>').val();
                alert(Country_ID);
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList runat="server" ID="ddlcountry">
                <asp:ListItem Value="0">--Select--</asp:ListItem>
                <asp:ListItem Value="1">India</asp:ListItem>
                <asp:ListItem Value="2">US</asp:ListItem>
                <asp:ListItem Value="3">UK</asp:ListItem>
            </asp:DropDownList>
        </div>
    </form>
</body>

</html>

Jquery Onchange Event with HTML DropDown

<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#ddlcountry').change(function () {
                var Country_ID = $('#ddlcountry').val();
                alert(Country_ID);
            });
        });
    </script>

</head>
<body>
    <form>
        <div>
            <select id="ddlcountry">
                <option value="0">--Select--</option>
                <option value="1">India</option>
                <option value="2">US</option>
                <option value="3">UK</option>
            </select>
        </div>
    </form>
</body>
</html>

Note:
1. Always Call Asp.net Control ID like this $('#<%=ddlcountry.ClientID%>').
2. Call HTML Control ID Like this $('#ddlcountry')

Also Read:


Textbox onchange jquery



I hope you like this "change event in jquery for dropdown". If you have any question feel free to comment below.



EmoticonEmoticon