Select onMouseover for options before selected

Forum Moderators: open

Message Too Old, No Replies

Select onMouseover for options before selected

whoisgregg

8:11 pm on Apr 27, 2007 (gmt 0)

On a select form input, is it possible to know which option the user is hovering their mouse over prior to the selection?

Sample code:

<div id="showvalue"></div>
<select name="test">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

If the user clicks this select and moves their mouse over the different choices, can the div be updated to reflect the

value

of the option over which their mouse is hovering? So, before they click, if the mouse is over the "Two" option, div#showvalue would contain "2"

Any ideas for how to search for this solution are welcome as I've had little luck finding other attempts. (I'm pretty sure I'll have to make a "fake" select menu but would prefer to avoid that.)

Thanks! :D

ericjust

8:50 pm on Apr 27, 2007 (gmt 0)

Below is a quick and dirty example that will give you some ideas. I do not have time for anything else right now, sorry! This will work in Firefox but not IE since IE has it's own ways for attaching events. You should probably look into a cross-browser event handler.

The basic idea is to:
- attach a mouseover event to the <select>
- when called check the target to see if it is an option
- if it is, update the <div>

This should get you started:

function showSelectValue(e) {
if (e.target.id!= 'select') {
document.getElementById('test').innerHTML = e.target.value;
}
}

function attachTest() {
document.getElementById('select').addEventListener('mouseover',showSelectValue,false);
}

</script>

</head>

<div id="test">Something Here</div>

<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>

</body>
</html>

whoisgregg

9:23 pm on Apr 27, 2007 (gmt 0)

Thanks! Turns out that code doesn't work in Safari at all. Firefox yes, haven't checked IE. (I am using prototype to handle event attachment, so I won't need to worry myself with cross browser issues there.)

So, time to file a bug with the Safari crew. :) Thanks again for your help!

Drag_Racer

6:29 am on Apr 28, 2007 (gmt 0)

Its not a bug in Safari, they just use a different way of attaching events.

rewrite your function attachTest

function attachTest() {
var s=document.getElementById('select');
if(s.attachEvent){
s.attachEvent('onmouseover',showSelectValue);
} else {
s.addEventListener('mouseover',showSelectValue,false);
}
}

whoisgregg

1:38 pm on May 1, 2007 (gmt 0)

Using the original code ericjust provided works to attach the event, it's just that Safari doesn't update

e.target

to reference the

<option>

s as the mouse moves over them.

e.target

continues to reference the

<select>

. :(

Adding a line to the

showSelectValue

function illustrates the issue:

function showSelectValue(e) { 
[b]document.getElementById('test').innerHTML = 'initial mouseover: '+e.target.value;[/b]
if (e.target.id!= 'select') { 
document.getElementById('test').innerHTML = e.target.value; 
} 
}