Using Javascript with ASP.NET Dropdown Control

[Stuart Shay]

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>

 

[agapeton]

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">
<aspropDownList>...
</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.

 

[gani21]

Declare dropdownlist as follow in aspx page

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

In javascript to make dropdown list visible, use as follow

var ddlStateControl = document.getElementById("DropDownList2");
if (ddlStateControl.style.display == "none")
{
ddlStateControl.style.display="block"
}