Using jQuery to show / hide controls depending on the selected value of the drop-down list

Question

I am trying to use jQuery to show / hide div tags based on the selected index of a drop down menu, however it does not work. Any help would be greatly appreciated.

Thank.

<%@ 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. ASP.Net version <4 will work with identifiers.

Take advantage of the fact that you can apply several classes to HTML elements. This allows you to group things. For instance. all your hidden reportdivs.

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

( ) , div, . a la JQuery ready(...).

<asp:DropDownList ID="ddlReports OnChange="ShowHide()" runat="server" Autopostback='true'p >
_{[ , @SeanTaylor, - , javascript, postback-to-server ASP.Net.]}

onselectedindexchanged="ddlReports_SelectedIndexChanged"p >
_{[ nu-skool, JQuery (. )]}
>      

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

slideDown reportdivs , - , , :

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

Answer 2

, - . div . ID o div, , .

:

<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>

:

$('.Report1').show('slow');

script, :

$('<%= Report1Section.ClientID %>').show('slow');

Answer 3

, .

, autopostback = "true", jquery, , divs .

.

The div id should remain the same as you called it, since they do not have runat = "server"