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.

image

On Mouse Hover

image






About The Author

Suprotim Agarwal
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.

Unknown said...
This comment has been removed by the author.
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?

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.

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.

George Fisher said...

Nicely done. Thank you.