CODEWITHSUNDEEP
javascripthtmlonmouseoverselectlistmouseclick-event
user646093
user646093

Reputation: 1603

How to drop a select list by 'onmouseover'?

How can I drop down a select list with onmouseover instead of clicking it. Select list cannot be clicked in javascript to emulate that. eg: onmouseover="(this.click())"

Also setting the 'size of select list' = 'its length' in javascript does not accurately emulate the click event because the adjacent layout changes. I tried using z-index and position attribute but doesn't help.

Upvotes: 1

Views: 5348

Answers (4)

smilebomb
smilebomb

Reputation: 5483

Just ran into this problem. I know it was answered already, but if anyone comes here looking for a more elegant solution, you can do this with jquery:

$("#select_id").hover(
    function(){
        $(this).attr('size',13); //My select had months, so 13 was appropriate. obviously you can change this
        $(this).css('position','absolute'); //prevents sibling elements from being pushed down
    },
    function(){
        $(this).attr('size',0); //resets select on mouseout
    }
);

This will prevent 'hacking' the select tag in the HTML.

Upvotes: 0

RobertO
RobertO

Reputation: 2663

It might help: https://developer.mozilla.org/en/DOM/event.initMouseEvent

edit. Nah, it doesn't :(

Upvotes: 1

MikeM
MikeM

Reputation: 27405

Here's a clever hack from an oldish devshed post

Select box expand onMouseOver - Dev Shed

here's an example in action:

http://jsfiddle.net/87nyG/1

Personally I'd prefer a 3rd party or custom solution as opposed to hacking the <select> element

Upvotes: 3

NakedBrunch
NakedBrunch

Reputation: 49413

It isn't possible to do what you're asking using a native HTML Select. You'll have to search out third party options.

Take a look at here for a possibility: http://jquery.sanchezsalvador.com/page/jquerycombobox.aspx

Upvotes: 0

Related Questions