Adding javascript hover event for items in an ASP.NET dropdownlist tied to a CascadingDropDown

I recently had a user ask if I could load some information onto a page in our application when he hovered over an item in an ASP.NET dropdownlist. To complicate matters, the dropdownlist was grouped with two others controlled by a CascadingDropDown control from the MS AjaxControlToolkit. So, the items in the dropdownlists were databound from the client-side. Though I'm not completely happy with it, I did manage to get something going and decided it may be useful to someone else.

First, here's the definition for my dropdownlist.

Second, I defined a method to handle the dropdownlist's "populated" event (Remember, it is populated client-side by the CascadingDropDown control). It loops through each of the items in the dropdownlist & assigns each an onmouseover event.

function pageLoad()
{
    $find("QuicklistWorkorders").add_populated(OnWorkordersPopulated);
}

function OnWorkordersPopulated()
{
    var ddl = document.getElementById("<%= DropDownListQuicklistWorkOrders.ClientID %>");

    //Assign Javascript function calls to the onmouseover event for each of the dropdownlist members
    //This only work on Firefox.  Users of other browsers will have to click option to fire webservice.
    for (var i = 0; i < ddl.options.length; i++)
    {                
        ddl.options[i].onmouseover = function(event)
        {
            clearTimeout(mouseOverTimer);
        
            event = event || window.event;
            var target = event.target ? event.target : event.srcElement;
            if ( target.nodeName.toLowerCase() === 'option' )
            {                        
                mouseOverTimer = setTimeout('GetWorkorderInfo(' + target.value + ')', 750);
            }
        }
            
        ddl.options[i].onmouseout = "clearTimeout(mouseOverTimer);"
    }
}

The resulting functionality is that Firefox users can hover over an item, and a javascript method will be called to perform some action. In my case a webservice is called to retrieve further information about the item over which the user is hovering. Users of other browsers must click the node to retrieve the info. If anyone knows how to get the hover functionality working for other browsers, I would love to hear it.