Using JQuery to Show/Hide controls depending on Dropdown list selected value

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>

immutabl · Accepted Answer · 2012-04-12 00:58:23Z

4

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

edited Apr 12, 2012 at 0:58

answered Jan 30, 2011 at 1:08

immutabl

6,89413 gold badges47 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BigBadDom Over a year ago

That approach works really well. In your comments, you have stated "there is a more modern way of writing this line": are you referring to $(function(){ ?

immutabl Over a year ago

Cool. Yes, I asked the question a while back: stackoverflow.com/questions/3941272/… .

Victor · Accepted Answer · 2011-01-29 20:42:20Z

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');

Sean Taylor · Accepted Answer · 2011-01-29 20:51:52Z

0

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"

edited Jan 29, 2011 at 20:51

answered Jan 29, 2011 at 20:35

Sean Taylor

5,0288 gold badges27 silver badges27 bronze badges

1 Comment

Victor Over a year ago

or preferably in this case would be to use a class name for selector. If your code structure changes for whatever reason, then so will the ASP.NET generated ID and your javascript will break.

Collectives™ on Stack Overflow

Using JQuery to Show/Hide controls depending on Dropdown list selected value

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related