can not use onmouseover event on select option in IE

Question

why IE have so many problem ????? it waste lots of time.....

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 work in IE.

Answer 1

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

Answer 2

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 3

JSBin your code is not working in IE 8 :-(