Question

I’m trying to use JQuery to show/hide div tags based on the selected index of a drop down menu, however it isn’t working. Any help would be greatly appreciated.

Thanks.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="drop_down_test.WebForm1" %>

<form runat="server" ID="frmReport">
    <asp:DropDownList ID="ddlReports" OnChange="ShowHide()" AutoPostBack="true" runat="server" 
        onselectedindexchanged="ddlReports_SelectedIndexChanged">
        <asp:ListItem Text="Please Select Report" Value="Default" />
        <asp:ListItem Text="Report 1" Value="ReportValue1" />
        <asp:ListItem Text="Report 2" Value="ReportValue2" />
    </asp:DropDownList>
    <br />
    <br />
    <div id="Report1Section">
        <asp:Label ID="lblReport1" Text="This is for Report 1" runat="server" />
    </div>
    <br />
    <div id="Report2Section">
        <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
    </div>
</form>

<script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript">
    function ShowHide() {
        var ddlSelectedIndex = ('#<%= ddlReportName.ClientID %>').get(0).selectedIndex;

        switch (ddlSelectedIndex) {
            case 1:
                $('#Report1Section').show('slow');
                $('#Report2Section').hide('fast');
                break;
            case 2:
                $('#Report1Section').hide('fast');
                $('#Report2Section').show('slow');
                break;
        }
    }
</script>

Answer 1

Use classes like @Victor said. ASP.Net versions <4 will mess with IDs.

Take advantage of the fact that multiple classes can be applied to HTML elements. This allows you to group stuff. E.g. all your hideable reportdivs.

  <div id="Report2Section" class="Report2 reportDiv">
      <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
  </div>

Then use the names (spaces removed) from the values of the list items to get the id of the div you need to show. You can wire your events up a la JQuery in the page’s ready(...) event.

<asp:DropDownList ID="ddlReports OnChange="ShowHide()"runat="server"
Autopostback='true'
_{[Take the autopostback off the dropdownlist like @SeanTaylor said – you want the change to fire your javascript code not the ASP.Net postback-to-server mechanism.]}

onselectedindexchanged="ddlReports_SelectedIndexChanged"
_{[Wire your events up the nu-skool, JQuery way (see below)]}
>

<asp:ListItem Text="Report 1" Value="Report1 _{[remove the space in the Value]} />

You can then call slideDown on all the reportdivs as a group, before calling slideUp on the one you need via its ID from the dropdown:

$(document).ready(function(){//there is a more modern way of writing this line.
    $('.ddlReports').change(function(){//JQuery style of wiring events up  
            $('.reportDiv').slideUp();//takes care of whichever one is showing (if any).
            $('#' + $(this).val() + "Section").slideDown();
    });
});