02 May 2010

Javascript: Auto-Expand a form's select box on hover/mouseover

Productivity is all about cutting down mouse clicks. With this in mind, I've written this function to open/close a html dropdown menu on mouseover/out. It's currently more of an idea than a usable function, so it might need some testing & tweaking to work cross browser in a real web environment but the basic principal is here to get you started.
Try a demo »

The Function: Please see right hand pane>

function toggleSelectBox(selbox){ 
  selbox.size = selbox.options.length;

<select id="type" name="type" onmouseout="toggleSelectBox(this)" onmouseover="toggleSelectBox(this)">
<option value="">opt1</option>
<option value="">opt2</option>
<option value="">opt3</option>


Anonymous said...

how can I get out the scroll bar?

Unknown said...

You can't I'm afraid. It's part of the browser rendering of select boxes. The only option is to create a custom built dropdown menu with css or javascript.

Anonymous said...

Thanks for your post, worked for me.

Anonymous said...

I think, it will be better to divide this function on two due to bugs with fast mouse movement ^^

style-sha said...

Hi, Looks great. But I need this in such a way that when i select any option by clicking it, it should get selected. And on mouse over of each option it must be highlighted with a background colour.

Please provide your inputs. Thanks in advance.

Unknown said...

Hi style-sha,
You can use css to highlight the option but it probably wont work in all browsers and I dont know of any workaround for this:

To close the select box when the user clicks, try:
after the onmouseout event in the html for the select box

Thanks said...

Useful code

hale said...



Post a Comment

Cron Design Studio: Dublin based web design & software development