CODEWITHSUNDEEP
jqueryasp.netdrop-down-menu
Matt
Matt

Reputation: 3970

jQuery: HTML DropDown list works, but ASP Control DropDown list does not

I have a simple jquery function which I use to show/hide some divs. The function works when I use a regular html dropdown list but not when using an ASP control, and I need it to work with the ASP control because I need to perform some actions on it in the code-behind.

DropDown Lists code:

<asp:DropDownList ID="SelectAccount" runat="server">
        <asp:ListItem Value="Social_Worker">Social Worker</asp:ListItem>
        <asp:ListItem>Sponsor</asp:ListItem>
    </asp:DropDownList>

    <select name="" id="SelectAccount1" onclick="return SelectAccount_onclick()">
        <option value="sponsor">Sponsor</option>
        <option value="social_worker">Social Worker</option>
    </select>​

jquery code:

$(document).ready(function () {
    var det = $("#SponsorDetails");
    var all = $("#AllDetails");
    $(all).hide();
    $(det).hide();

    $("#SelectAccount").change(function () {
        //hide social worker and sponsor stuff
        var value = $("#SelectAccount option:selected").val();
        if (value == "social_worker") {
            //show social worker stuff
            $("#AllDetails").show("slow");
            $("#SponsorDetails").hide("slow");
        } else {
            //show sponsor stuff
            $("#AllDetails").show("slow");
            $("#SponsorDetails").show("slow");
        } 
    });
  });

Why won't the same jquery work with the ASP control?

Upvotes: 0

Views: 629

Answers (2)

arunes
arunes

Reputation: 3524

$("#AllDetails").show("slow"); // is this could be hide?
$("#SponsorDetails").show("slow");

And try #<%=SelectAccount.ClientID%> instead of #SelectAccount

Upvotes: 1

Void
Void

Reputation: 265

This is probably because the ID of the asp control is a server side id whereas the id of a normal control is client side and they do not always match especially if they are nested or in master pages.

To make this work you could modify your script, if your script is in the page, on the server side something like this:

$("#<%=SelectAccount.ClientID %>").change(function () { ... }

Upvotes: 1

Related Questions