Avoid scrolling dropdown menu after selection.

[green]

The problem
When users select an option from a drop down menu, they tend to immediately use the scroll wheel to move down the page with the result that they scroll the drop down list instead because it still has focus.

This code prevents that by losing focus after selection:

onChange="self.focus();"

BUT, users, on my site, often open the drop down again, don't change the option and scroll. The result (as no onChange fired): the list scrolls.

I found this code:

onChange="self.focus();" onFocus="options[0].selected = true; return false;" tabindex="-1"

which TRIES to solve the problem by returning to the TOP option in the list when it is reopened and then losing focus.

HOWEVER, I have long lists and I DON'T want the user to lose his/her original selection if he/she opens list again.

What I need..
A code to lose focus on the drop down list (so the scroll wheel won't move it) whether the user changes his/her selection or not.

I would be very grateful for any help on this :o

[Bob90]

<select onchange="this.blur()">

[green]

No, that does nothing at all! At least not in EI where I need it to work.
Any other ideas out there?????
:confused:

[Bob90]

See this page for something that works

http://www.webdeveloper.com/forum/archive/index.php/t-90643.html

[green]

Yep, Bob, that about does it! Though nobody in that forum actually clinched it in one.

In the end, I opted for a combination of two handlers:

select onmousewheel="return false" onChange="self.focus();"

The onChange event(s) work(s) fine to take focus away from the drop down IF a user changes an option BUT doesn't solve the problem if a drop down is opened and NO change made.

The onmousewheel works fine in all cases but it could be a bit disconcerting for an inexperienced user 'cos the mouse wheel stops working until he clicks on the page somewhere.

By combining the two, the onchange allows for mouse wheel use IF option change made and user only gets his wheel disabled in the event of NOT changing an option in the drop down.

Thank you very much for that! Cos it was a bit of headache and a nut I couldn't crack. (Will that "thank you" automatically appear in your stats?)

[Bob90]

Great for the thanks, but I don't want to take credit for another persons work.

:)

Glad you found your answer

[green]

Just as a postscript and if anyone else is interested in the above problem. By jiggling these codes about I've found you can avoid any clicking on the page to activate the scroll wheel after using the drop down by using the following combination:

onMousewheel="self.focus(); return false;" onChange="self.focus();"

The onChange event is possibly redundant but offers a slightly different effect. Try it!