making user controls visible/invisible using javascript

Hi experts,
I have a dropdown list that I want to use to make a custom user control visible or invisible depending on what is selected in the drop down.  Is there any way to do this?  I know I can do it by setting the drop down to auto postback, but is there a way to do it with javascript and not have to do a round trip to the server?

Who is Participating?
shovavnikConnect With a Mentor Commented:
I too apologize for the delay.

It is possible to do with a radio button list.  You'll have to capture the OnItemCreated event of the radio button list on the server-side, and set the attribute of each radio button created, as above:

e.Item.Attributes[ "onclick" ] = "toggleCustomControlVisibility('TheNameOfTheControlThisRadioButtonToggles')";

and on the client side, you'll only have to add a little bit to the script already shown.

function toggleCustomControlVisibility( controlName ) {
  var controlToToggle = document.all[ controlName ];
  if( == 'block' ) = 'none';
  else = 'block';

First, make sure your custom control has a single containing html element.  For example, everything should be enclosed with a div element or something of the sort.  Don't create multiple elements like <div></div><div></div> but rather put everything into one container.

Second, in your javascript, you can use something lile this for the onselectedindexchange() event of your dropdown list:

function toggleCustomControlVisibility() {
  var dropdownlist = document.all[ 'MyDropDownList' ];
  if( dropdownlist.selectedIndex == 1 ) document.all[ 'MyCustomControl' ].style.display = 'none';
  else document.all[ 'MyCustomControl' ].style.display = 'block';

To assign this event to your asp dropdown list, on the server (in Page_Load() for example), add the following code:
MyDropDownList.Attributes[ "onselectedindexchanged" ] = "toggleCustomControlVisibility()";
mboschAuthor Commented:
I see what you're saying.  Is there anyway to do this with a radiobuttonlist control?  Thanks and sorry for the delay in response time.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.