A little something about everything

internet marketing and website development made simple..

How to show/hide a asp.net sub element with jquery

This method allows you to show/hide a form element without making another request against the server. It also works when the show/hide element is required by the asp.net code behind.

You can use any type of sub element under a dropdown with this script. You will need to use a CDN or download and host your own jquery-1.3.2.min.js file.

SCRIPT

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function() { $('#<%= Dropdown1.ClientID %>').change(function() { if (this.value=="My Value") { $('#<%= Element1.ClientID %> ').css({ visibility: 'visible' }); } else { $('#<%= Element1.ClientID %> ').css({ visibility: 'hidden' }); }}); }); </script>

 

HTML

<asp:DropDownList runat="server" ID="Dropdown1" class="required" >
<asp:ListItem Value=""> none</asp:ListItem>
<asp:ListItem Value="My Value">Some Text Here</asp:ListItem>
</asp:DropDownList>

<!-- place any element here with id="Element1" -->