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.getEle mentById("drpFi lterType");
var selectedFilterT ype = drpFilterType
..options[drpFilterType.s electedIndex].value;
if (selectedFilter Type == "MonthFilte r")
{
document.getEle mentById("drpMo nthFilter").sty le.visibility=" visible";
document.getEle mentById("drpYe arFilter").styl e.visibility="v isible";
}
else if (selectedFilter Type == "YearFilter ")
{
document.getEle mentById("drpMo nthFilter").sty le.visibility=" hidden";
document.getEle mentById("drpYe arFilter").styl e.visibility="v isible";
}
else if (selectedFilter Type == "All")
{
document.getEle mentById("drpMo nthFilter").sty le.visibility=" hidden";
document.getEle mentById("drpYe arFilter").styl e.visibility="h idden";
}
}
</script>
-- ASP.NET Page --

Filter Type
<asp:dropdownli st id="drpFilterTy pe" runat="server" CssClass="boxfo rmwh"
onchange="retur n FilterStatus()" >
<asp:ListItem Value="MonthFil ter">Month</asp:ListItem>
<asp:ListItem Value="YearFilt er">Year</asp:ListItem>
<asp:ListItem Value="All">All Data</asp:ListItem>
</asp:dropdownlis t>
<asp:dropdownli st id="drpMonthFil ter" runat="server"
style="visibili ty:visible;" /></td>
<asp:dropdownli st id="drpYearFilt er" runat="server"
style="visibili ty:visible;"/>
<asp:button id="btnFilterDa ta" runat="server" CssClass="Butto n" 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="litViewStat us"
runat="server"> </asp:Literal>) ? "block" : "none";

Then

myContainer.sty le.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:DropDownLi st>...
</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="litViewStat us"
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/