title: Using JQuery to Show/Hide controls depending on Dropdown list selected value
body: <p>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.</p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="drop_down_test.WebForm1" %&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p></p>
  
  <pre><code>&lt;form runat="server" ID="frmReport"&gt;
      &lt;asp:DropDownList ID="ddlReports" OnChange="ShowHide()" AutoPostBack="true" runat="server" 
          onselectedindexchanged="ddlReports_SelectedIndexChanged"&gt;
          &lt;asp:ListItem Text="Please Select Report" Value="Default" /&gt;
          &lt;asp:ListItem Text="Report 1" Value="ReportValue1" /&gt;
          &lt;asp:ListItem Text="Report 2" Value="ReportValue2" /&gt;
      &lt;/asp:DropDownList&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;div id="Report1Section"&gt;
          &lt;asp:Label ID="lblReport1" Text="This is for Report 1" runat="server" /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div id="Report2Section"&gt;
          &lt;asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-1.4.1.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function ShowHide() {
          var ddlSelectedIndex = ('#&lt;%= ddlReportName.ClientID %&gt;').get(0).selectedIndex;
  
          switch (ddlSelectedIndex) {
              case 1:
                  $('#Report1Section').show('slow');
                  $('#Report2Section').hide('fast');
                  break;
              case 2:
                  $('#Report1Section').hide('fast');
                  $('#Report2Section').show('slow');
                  break;
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p></p>