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

Unknown said...

cheap jordans
louis vuitton handbags
cheap nfl jerseys
supra for sale
christian louboutin shoes
fitflops sale clearance
michael kors outlet
toms shoes
lebron james shoes

Unknown said...

christian louboutin
oakley sunglasses wholesale
kd 10 elite
ray ban sunglasses outlet
pandora charms
true religion jeans sale
ralph lauren outlet
canada goose jackets
ugg boots on sale
chloe sunglassess

yanmaneee said...

pg 4
kenzo clothing
hermes handbags
supreme hoodie
golden goose
golden goose sneakers
stone island sale

Thanks said...

Useful code

Post a Comment

Cron Design Studio: Dublin based web design & software development