Show/Hide Combobox at runtime using JavaScript

Many a times in the programming world we feel the need to hide or show the dropdown lists or combo boxes of the particular page or a div or another control so here is a small snippet.

I developed this code when I was working on a application in which I have used JavaScript menus as that was the need or I must say priority of the client. The application was working quiet good as there is no clause that JavaScript menus will hamper any working of code in my application. But I was experiencing a strange behavior of the combo box and the menu items. When ever the menu opens and there is a combo box on the page the combo box z-index is getting priority over the menus. Z-index. What I mean to say is that the combo box is overlapping the menu strip due to which some menu items were hidden or I must say overlapped by the combo box. So I got the instructions that I must hide the combo box when ever the menu strip is opened. So here is what I have done.

The following is the JavaScript function to achieve the above you can embed it in any external JavaScript file or write as an inline script or include in the head section...

You can even change the 'select' tag to any other tag name to extend the functionality.





/*
create a function To  showOrHideAllDropDowns which takes 
the newState as a parameter i.e hidden or visible.
*/
function showOrHideAllDropDowns(newState)
{
  //getting the elements by the tag select for drop downs or combo box
      var elements = document.documentElement.getElementsByTagName('select');
 //setting its visibility to new state
      for (var i=0; i
          elements[i].style.visibility = newState;
      }    
}

To use the Above function in a div we can write it like

 //A small example to call the above function
  < style="width:220px;" onmouseover="showOrHideAllDropDowns('hidden');" onmouseout="showOrHideAllDropDowns('visible');">


Hope you enjoyed the article and will enjoy its working too.