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



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

5 comments:

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

Society for Handicapped 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.