Using JavaScript to DropDown an HTML Select on MouseOver

An HTML SELECT can be programmatically dropdown on MouseOver using JavaScript. On MouseOut, we can get the SELECT to its default positions. Here's how to do it

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Drop on Hover</title>
    <script type="text/javascript">
        function DropList() {
            var n = document.getElementById("sel").options.length;
            document.getElementById("sel").size = n;
        }
    </script>
</head>
<body>
    <div>
       <select id="sel" onmouseover="DropList()" onmouseout="this.size=1;">
            <option>One</option>
            <option>Two</option>
            <option>Three</option> 
            <option>Four</option> 
            <option>Five</option>
            <option>Six</option>
            <option>Seven</option>
            <option>Eight</option>
        </select>
    </div>  
</body>
</html>

See a Live Demo.

On Mouse Hover

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

6 comments:

Unknown said...: Wow, I hadn't thought about it that way before. Good write up, very clearly written. Have you written previously about Using JavaScript to DropDown an HTML Select on MouseOver? I'd love to read more.; August 26, 2009 at 2:45 PM
Unknown said...: This comment has been removed by the author.; August 27, 2009 at 9:59 AM
Anonymous said...: Kinda backwards moving IMO just because the select element can't be easily styled cross browser. What I'm looking for is an elegant way of turning a div into a select box. Any takers?; August 27, 2009 at 10:00 AM
Anonymous said...: I've just started using the mega-dropdown menu code from here: http://www.javascriptkit.com/script/script2/jScale/

It lets you drop down a div with any contents just by hovering over something....

It is jQuery-based.; August 27, 2009 at 10:50 AM
Anonymous said...: This is very cool.

1 suggestion:

Could you make the "dropdown" drop over the other elements in the page rather than displace them.

1 question:

How could I apply this to multiple select boxes on a page - at the moment I've attempted to but only 1 responds.; January 22, 2011 at 4:05 AM
George Fisher said...: Nicely done. Thank you.; January 4, 2017 at 11:31 AM