We help IT Professionals succeed at work.

Attaching onmouseover event to options in a selectbox

alonrotem
alonrotem asked
on
Hi,

I have a simple HTML selectbox on my page:

<SELECT id=MySelect name=MySelect size=10>
  <OPTION id='o1' name='o1'>1</OPTION>
  <OPTION id='o2' name='o2'>2</OPTION>
  <OPTION id='o3' name='o3'>3</OPTION>
</SELECT>

I want to catch 'mouseover' and 'mouseout' events for each and every option listed in the box (in order to popup a tooltip DIV relevant for that option).
I know that the OPTION element doesn't support mouseover events, but I also know that it's possible to attach this event by using the attachEvent method.
I tried something like this:

<script>
function test()
{
   TheID=event.srcElement.id;
   alert (TheID);
}

for (i=0;i<MySelect.options.length;i++)
MySelect.options[i].attachEvent('onmouseover',test);
</script>

but, alas, this did not work, and moving the mouse over the options in the box did not invoke the test function.
1. what am I doing wrong?
2. how can I do this right?

Thanks,
Alon.
Comment
Watch Question

CERTIFIED EXPERT

Commented:
I suggest using a function to set the tool-tip text based on the selected option


<SCRIPT language='javascript'>
 function setTip(selectedValue)
 {
    if ( selectedValue = 'o1' )
      document.all.toolTipDiv.innerText="tip for opt 1";

    if ( selectedValue = 'o2' )
      document.all.toolTipDiv.innerText="tip for opt 2";

    if ( selectedValue = 'o3' )
      document.all.toolTipDiv.innerText="tip for opt 3";
 }
</script>

...

<SELECT id=MySelect name=MySelect size=10 onChange='setTip(this.options[this.selectedIndex].value);'>
 

Author

Commented:
First of all, thanks for the prompt comment, knight.

I really need this to react to a mouseover event, without the need for clicking/selecting.
Also note, that this is a multi selectbox, not a drop down list, thus, I want the option to use multiple selections.
Top Expert 2013

Commented:
You cannot attach an event to an eleemnt that does not support events.
The option tag does not support events.

You can simulate the tooltip with an event on the select or you can style a div and spans
to look like a select and code the tooltip on the spans, but of course it will not have the
select functionality.  I can give you styling and code for that if you want to try it, but if
you need the select attached to a form it will take a bunch of scripting to get the form
populated properly.

Cd&
CERTIFIED EXPERT

Commented:
alonrotem,
to my comments above, the function would only be used to set the tip text ... you would then still need to use a mouseover handler to make the tip visible or invisible:

<SELECT id=MySelect name=MySelect size=10
   onChange='setTip(this.options[this.selectedIndex].value);'
   onMouseOver='showTip();'
   onMouseOut='hideTip();'>


Finance Systems Developer
Commented:
Well what you could do is redirect all non-DOM supporting browsers to a simpler page and tell them to upgrade to a superior browser(and of course give them the link to download).

But for Mozilla users (and therefore Netscape 6+), you simply do this.
<html>
<head>
  <title>Option Mouse Over</title>
  <script>
 
  function optMouse(ch) {
    document.getElementById("theHead").innerHTML=ch;
  }
  </script>
</head>

<body>
<h3 id="theHead">Hello World</h3>
<form>
<select>
<option onmouseover="optMouse('a')" value="a">A</option>
<option onmouseover="optMouse('b')" value="b">B</option>
</select>
</form>

</body>
</html>


The above example was not for tooltips, but just to show it has onmouseover handling. If you wanted the ready-made tooltip, the why not just use the DOM standard title attribute in the option tag?

<html>
<head>
  <title>Option Mouse Over</title>

</head>

<body>
<h3>Hello World</h3>
<form>
<select>
<option title="I am option A" value="a">A</option>
<option title="I am option B" value="b">B</option>
</select>
</form>

</body>
</html>

Author

Commented:
Thank you all for joining the discussion. These are all really nice ideas.
Of course it is possible to simulate a select box by using an iframe and a rather simple table (if they are correctly configured).
COBOLdinosaur: Are you sure there's no way to assign those mouse-events to an option elemnt? I have managed to assign events using the assignEvent method (which *is* supported by the option element), -OR- is there a way to use the the select element's onmouseover event, and to know over which option it hovers without actually selecting an option? (maybe by knowing the cursor's window coordinates)
Top Expert 2013

Commented:
I'm don't think mouseover on the select would help much because the mouse can continue
to move after entry into the select.  You might be able to use onMousemove and trap the x,y
co-ordinates of the mouse.  There are two problems with that:

1.  It is inefficient.  It will use a lot of cpu, and is easily fooled.
2.  It would take some serious calculations.  The co-ordinates of the select and the height of each
     option in the select would need to be known. Even if you work it out for one computer, along
     comes a user with preferences set that change the font size and everything goes down the tubes.

Cd&

Author

Commented:
OK I'm going to close the question. Sorry it has taken me so long. Thank ou for your answer as it was the most detailed and most efficient I got for my question.

Commented:
Hello Aon,

Did you get the solution to above problem?

Cools_-