Q: Using JQuery to Show/Hide controls depending on Dropdown list selected value 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>



A: 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();
    });
});


A: The ID of your elements are rendered differently than you have declared due to the master page. I would recommend you use a class name for the div to use as selector instead. You could guess and hard code the expected ID o the div, but if your code structure changes, then the generated ID will too.
try this:
<div id="Report1Section" class="Report1">
        <asp:Label ID="lblReport1" Text="This is for Report 1" runat="server" />
    </div>
    <br />
    <div id="Report2Section" class="Report2">
        <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
    </div>

and then:
$('.Report1').show('slow');

or you can use server script to get the ID dynamically:
$('<%= Report1Section.ClientID %>').show('slow');


A: Withdrawing my previous answer as I didn't read your source code properly.
I've noticed that you have the autopostback="true" set on the dropdown, this will trigger the jquery, but then the page will re-load and the divs visability wont change.
Remove the autopostback and it should work.
The div's ID's are should remain the same as what you have named them, as they don't have runat="server"
