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){ 
 if(selbox.size>1){//HIDE:
  selbox.size=1;
  selbox.style.position='static';
 }else{//SHOW:
  selbox.size = selbox.options.length;
  selbox.style.position='absolute';
  selbox.style.height='auto';
 }
}


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

7 comments:

Anonymous said...

how can I get out the scroll bar?

cron 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.

reverse 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.

CiarĂ¡n O'Kelly 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:
option:hover{background:red;}

To close the select box when the user clicks, try:
onclick="toggleSelectBox(this)"
after the onmouseout event in the html for the select box

Meiqing Xu said...

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

Post a Comment

Cron Design Studio: Dublin based web design & software development