Hide Select Menus JavaScript

Posted Nov 7, 2005
Last Updated Nov 9, 2011

Sometimes it is beneficial to hide select menus with JavaScript, especially on Internet Explorer 6 and older. 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):


2011-11-09 This function was needed to deal with rendering bugs in IE6. To my knowledge, that bug is no longer part of IE and this function is less important.

Comment

No HTML Tags are permitted.

Angry Teapot Level Design Awards

Newsletter Subscription