Hide Select Menus JavaScript

By Shawn Olson

Posted on November 8th, 2005

Sometimes it is beneficial to hide select menus with JavaScript, especially on Internet Explorer. There may be times to do it in other browsers, but it is necessary to hide select menus on Internet Explorer in particular because select menus hover above all other objects in a window on Internet Explorer--which plays havoc with drop-down menus that drop-down underneath selects instead of over them.

The hideSelects() function will hide all selects on a page (in all forms on the page) when 'hidden' is passed; conversely, it will display all select menus when 'visible' is passed into the function.

//hide selects on page - copy code below

		function hideSelects(action) { 

		//documentation for this script at http://www.shawnolson.net/a/1198/hide-select-menus-javascript.html

		//possible values for action are 'hidden' and 'visible'

		if (action!='visible'){action='hidden';}

		if (navigator.appName.indexOf("MSIE")) {

		for (var S = 0; S < document.forms.length; S++){

		for (var R = 0; R < document.forms[S].length; R++) {

		if (document.forms[S].elements[R].options) {

		document.forms[S].elements[R].style.visibility = action;

		}

		}

		} 

		}

		}

		//end code

When using this code, please include credit to this site. If you wish to use this function on browsers other than Internet Explorer, simply remove the MSIE condition. Below is an example of the implementation (only in MS IE):

Hide Select Menus JavaScript

Hide Select Menus JavaScript

By Shawn Olson

More in the Free Useful Javascripts Series