Call a Javascript function on dropdownlist change

Question

I'm using Visual Studio 2013 WebForms, and I'm trying to call a javascript function when a dropdownlist (Asp:DropDownList) is changed. However I am totally confused with this behavior. Could someone please tell me what is wrong?

This works

 <asp:DropDownList ID="ddlList" CssClass="form-control" onchange="alert(1)"  runat="server"></asp:DropDownList>

But nothing happens with this

$(document).ready(function () {
    function test() {
        alert(1);
    }
});

    <asp:DropDownList ID="ddlList" CssClass="form-control" onchange="test()"  runat="server"></asp:DropDownList>

and this does not work either

$(document).ready(function () {
    $('#ddlList').change(function(){
        alert(1);
    });
});

<asp:DropDownList ID="ddlList" CssClass="form-control" runat="server"></asp:DropDownList>

The hide() function works fine so I believe jquery itself works.

$("#divTextbox").hide();

This must be a simple thing but I've stack with this..

Is there any console error when the onchange doesn't work? Are you sure you tagged the script properly? — A. Abramov
– A. Abramov, Commented Jun 11, 2015 at 22:19
I'm debugging with FIrebug but I don't get any error messages.. — kabichan
– kabichan, Commented Jun 11, 2015 at 22:21
Try to change the JS to run on the CSS instead of on the ID- $('.form-control').change... does it work? — A. Abramov
– A. Abramov, Commented Jun 11, 2015 at 22:22
Ah yes, it works with the class name. What does that mean?? Should I use a class name or is there a way to make it work with the ID name? — kabichan
– kabichan, Commented Jun 11, 2015 at 22:24
Then Halcyon's solution is correct (: I highly suggest you change the ClientIDMode, this way you dont have to go the whole way around each time you try to address an element. If you need details on how to do that, just ask for it and i'll answer. — A. Abramov
– A. Abramov, Commented Jun 11, 2015 at 22:25

Halcyon · Accepted Answer · 2015-06-11 22:23:47Z

2

You need to modify your selector

$("#<%=ddlList.ClientID%>").change(function() {
    // do stuff here...
});

The jQuery selector you have targets the id of the server control, but when the server sends the response back, the id gets turned into some garbage like ct100_ddlList. You can also set the ClientIDMode to state on the server control.

answered Jun 11, 2015 at 22:23

Halcyon

15k17 gold badges73 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kabichan Over a year ago

Worked perfectly!! Thank you! I'll accept your answer in 5 minutes (SO doesn't allow me to click the accept button yet)

ManP · Accepted Answer · 2015-06-12 00:35:53Z

0

You can use ClientIDMode="Static" for ddlList if you want to use exact the same name in javascript.

answered Jun 12, 2015 at 0:35

ManP

2311 silver badge6 bronze badges

Collectives™ on Stack Overflow

Call a Javascript function on dropdownlist change

This works

But nothing happens with this

and this does not work either

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

This works

But nothing happens with this

and this does not work either

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related