CODEWITHSUNDEEP
javascriptc#jqueryasp.netwebforms
kabichan
kabichan

Reputation: 1093

Call a Javascript function on dropdownlist change

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..

Upvotes: 0

Views: 1452

Answers (2)

ManP
ManP

Reputation: 231

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

Upvotes: 0

Halcyon
Halcyon

Reputation: 14941

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.

Upvotes: 2

Related Questions