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>

8 comments:

  1. AnonymousApril 11, 2011 10:06 PM

    how can I get out the scroll bar?

    ReplyDelete
  2. UnknownJuly 17, 2011 4:13 PM

    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.

    ReplyDelete
  3. AnonymousJune 26, 2012 10:26 PM

    Thanks for your post, worked for me.

    ReplyDelete
  4. AnonymousJuly 30, 2012 7:02 PM

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

    ReplyDelete
  5. style-shaMay 08, 2014 11:24 AM

    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.

    ReplyDelete
  6. UnknownMay 08, 2014 11:55 AM

    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

    ReplyDelete
  7. ThanksNovember 19, 2022 8:06 PM

    Useful code

    ReplyDelete
  8. haleAugust 01, 2023 11:06 AM

    çankırı
    tekirdağ
    giresun
    manisa

    N44

    ReplyDelete