Question

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?

Answer 1

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 () { ... }