Using Javascript with ASP.NET Dropdown Control

Discussion in 'ASP .Net' started by Stuart Shay, Dec 14, 2005.

  1. Stuart Shay

    Stuart Shay Guest

    Hello All:

    I hava a ASP.NET Web Page where I want to change the visibility of a
    Dropdown, I want to avoid using Postback
    since the selection of the Dropdown choices is always the same. The Code
    below is just a date filter selection.

    The Code works fine but on page postback I want to reload the Js script so
    the Dropdown visibility selection remains.

    --- JS ---

    <script>
    function FilterStatus()
    {
    var drpFilterType = document.getElementById("drpFilterType");
    var selectedFilterType = drpFilterType
    ..options[drpFilterType.selectedIndex].value;
    if (selectedFilterType == "MonthFilter")
    {
    document.getElementById("drpMonthFilter").style.visibility="visible";
    document.getElementById("drpYearFilter").style.visibility="visible";
    }
    else if (selectedFilterType == "YearFilter")
    {
    document.getElementById("drpMonthFilter").style.visibility="hidden";
    document.getElementById("drpYearFilter").style.visibility="visible";
    }
    else if (selectedFilterType == "All")
    {
    document.getElementById("drpMonthFilter").style.visibility="hidden";
    document.getElementById("drpYearFilter").style.visibility="hidden";
    }
    }
    </script>


    -- ASP.NET Page --

    Filter Type
    <asp:dropdownlist id="drpFilterType" runat="server" CssClass="boxformwh"
    onchange="return FilterStatus()" >
    <asp:ListItem Value="MonthFilter">Month</asp:ListItem>
    <asp:ListItem Value="YearFilter">Year</asp:ListItem>
    <asp:ListItem Value="All">All Data</asp:ListItem>
    </asp:dropdownlist>


    <asp:dropdownlist id="drpMonthFilter" runat="server"
    style="visibility:visible;" /></td>
    <asp:dropdownlist id="drpYearFilter" runat="server"
    style="visibility:visible;"/>
    <asp:button id="btnFilterData" runat="server" CssClass="Button" Text="Filter
    Data"></asp:button>
     
    Stuart Shay, Dec 14, 2005
    #1
    1. Advertising

  2. Stuart Shay

    Guest

    Nice code... except it's <script type="text/javascript"></script> (and
    see my below note about the deprecated visibility attribute)

    Here's what I would do...

    var viewStatus = (<asp:Literal id="litViewStatus"
    runat="server"></asp:Literal>) ? "block" : "none";

    Then

    myContainer.style.display = viewStatus;
    (or combine the two)

    Don't use "visibility", that's been deprecated for a number of years.
    You use "display" with many options but here are the most common:

    none - don't show
    inline - inline page flow (the default for span and most other things
    block - newline page flow (the default for div)

    I would do something like this...

    <div id="myContainer">
    <asp:DropDownList>...
    </div>

    and then play with the method I just gave you. (you're also want to
    avoid the use of style="" as that defeats the point of CSS: to be a
    page's presentation codehind) You can use the above method to also
    just write an inline CSS page. like this

    #myContainer {
    display: <asp:Literal id="litViewStatus"
    runat="server"></asp:Literal>);
    }

    Which actually seems nicer...just make sure you do something with
    litViewStatus in you .NET codebehind.

    --
    David Betz
    http://www.davidbetz.net/winfx/
    http://www.davidbetz.net/dynamicbliss/
     
    , Dec 14, 2005
    #2
    1. Advertising

  3. Stuart Shay

    gani21

    Joined:
    Oct 8, 2009
    Messages:
    4
    Declare dropdownlist as follow in aspx page

    <asp:DropDownList ID="DropDownList2" runat="server" style="display: none;" >
    </asp:DropDownList>

    In javascript to make dropdown list visible, use as follow

    var ddlStateControl = document.getElementById("DropDownList2");
    if (ddlStateControl.style.display == "none")
    {
    ddlStateControl.style.display="block"
    }
     
    gani21, Oct 9, 2009
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. vishnu
    Replies:
    1
    Views:
    1,230
    Patrick.O.Ige
    Mar 25, 2006
  2. Mike
    Replies:
    1
    Views:
    824
  3. acadam
    Replies:
    0
    Views:
    766
    acadam
    Dec 27, 2006
  4. Replies:
    2
    Views:
    446
  5. shantanu
    Replies:
    0
    Views:
    142
    shantanu
    Aug 17, 2005
Loading...

Share This Page