IE, JQuery, Hovering and Option Elements

I hate Internet Exploder with a passion. Why does it need to be such a piece of non-compliant, non standard crap? It’s not like I was trying to do something outrageous. It was simple and logical script, but it wouldn’t work in IE.

I wanted to have a <select> box that would look something like this, only with more entries (it would be over 100 dynamically generated from the database):

   foo
   bar
   baz
   bin

Next I wanted to add a JQuery script which would load a short description of each item into a div for each of the <option> items inside the <select> when you hover your mouse over it. Sort of like a tooltip, but it would show up inside of the page. Initially I tried to do it the logical way, by invoking the hover method on the <option> element.

$(document).ready(function(){
    $("option").hover($("#somplace").load($(this).attr("id")));
});

It worked perfectly in Firefox, but IE did not even throw a Javascript error. It simply ignored the script without as much as a warning. Apparently <option> elements do not fire hover events in IE. The only way around it was to do it backwards. Catch the hover event on the <select> element and then find out which <option> was selected when the event fired.

$("select").change(function () {
    $("#someplace").load($(this).children("[@selected]").attr("id"));
});

This is not the worst solution – I have seen much uglier hacks. Still, the first script seems a bit more readable, at least to me. But what are you going to do. In retrospect, this turned out to be a blessing in disguise, because when I tested the original script in Chrome it did not work either. Apparently Webkit doesn’t think that <option> elements are to be treated like regular DOM elements either.

If you ever stumble upon this problem, this is probably the best way to get around it.