can not use onmouseover event on select option in IE

Question

Updated code:

function getElements()
  {
  var x=document.getElementsByTagName("option");

var el = document.getElementById('selectDept');
el.onmouseover = function( myevent ) {
   // event = event || window.event.srcElement;
if(myevent && myevent.target){
    if ( myevent.target.tagName.toLowerCase() == 'option' ) {
        alert(myevent.target.innerHTML);
    }
}
else if(window.event)
{
   if ( window.event.srcElement.tagName.toLowerCase() != 'select' ) {
        alert('s');
    }
 
}
};

but still not working in IE.

Answer 1

IE does not support events on the option element. You can try as @meder says to add a handler on the parent select and then inspect the event to see which option was moused over.

PS these were known bugs in IE6 (and reported in IE7 and IE8 beta testing - and rejected for fixing to date) :-(

Maybe IE9 will support them?

Answer 2

Can't you still set a mouseover event handler on the whole select, and target the event property if the target is an option element, do X action?

var el = document.getElementById('foo')
el.onmouseover = function( event ) {
    event = event || window.event;
    var target = event.target ? event.target : event.srcElement;
    if ( target.nodeName.toLowerCase() === 'option' ) {
        alert('option');
    }
}

Updated code:

http://jsbin.com/olusi