JQuery dropdownlist/select onchange event not fired

I have this dropodownlist / combobox / select element inside an asp.net form:

<asp:DropDownList 
 ID="_ddlMode" 
 runat="server" 
 AppendDataBoundItems="true" 
 ClientIDMode="Static" 
 CssClass="input_medium" 
 DataSourceID="_sdsModes" 
 DataTextField="description" 
 DataValueField="id">
 <asp:ListItem Selected="True" Text="None" Value="" />
</asp:DropDownList>

I need to call function SetModes() when the selected element is changed from the user.
I tried with this:

 $(function () {
   $(document.body).on('change', '_ddlMode', function () {
       var _index = $("select[id='_ddlMode'] option:selected").index();
       SetModes(_txtBank, _txtZip, _index);
   });
 });

No luck. Then I tried this:

 $(function () {
    _ddlMode= $("input[id$='_ddlMode']");

    _ddlMode.change(
        function () {
           var _index = $("select[id='_ddlMode'] option:selected").index();
           SetModes(_txtBank, _txtZip, _index);
        }
    );
});

Again no luck…. where’s the error?
There’s a more efficent way to retrieve the index of the selected element within the event handling ?

P.S. I’m using jquery-.2.1.3, jquery-ui-1.11.2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

So, you are willing to hit a method in your javascript code and it is not working for you. There could be many reasons behind why it is not hitting it, I would write few of those possible reasons here with their respective possible solution.

Reason:
Since you are using jQuery to bind the dropdownlist with a change event, I would suspect if your jQuery is being referenced correctly.

Solution:
Go to the browser’s dev tools’ console tab (CTRL + SHIFT + I) and see if you have any error with jQuery not being loaded, If yes then fix it.

Reason:
As @freedomn-m has pointed out in the comments, You are not specifying a css selector, in your case # before your id while binding the event.

Solution:

$(function () {
   $(document.body).on('change', '#_ddlMode', function () {
       var _index = $("select[id='_ddlMode'] option:selected").index();
       SetModes(_txtBank, _txtZip, _index);
   });
 });

Reason:
Your event is not getting bound to the desired control. This could be very specific to ASP.NET Web Forms, as you can face it while you are building your web apps.

So, technically, ASP.NET can modify the IDs of your controls when you compile them and it could be a possible reason for not hitting the method.

For example, if you have a ContentPlaceHolder with an id of cph_1 and have markup in it as your child page, then ASP.NET will concatenate that id with every nested server control of yours. So, if you have a textbox with an id of tb1 in that content place holder, it would get modified to cph1_tb1 when browsing through that page.

Solution:
Bind your event with the help of this syntax (<%%>) like below:

$(function () {
   $(document.body).on('change', '#<%= _ddlMode.ClientID %>', function () {
       var _index = $("select[id='<%= _ddlMode.ClientID %>'] option:selected").index();
       SetModes(_txtBank, _txtZip, _index);
   });
 });

See, if you can resolve the issue with these solutions.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0