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):

<select id="myselect" name="fooselect">
   <option value="1" id='lookup.php?q=1'>foo</option>
   <option value="2" id='lookup.php?q=2'>bar</option>
   <option value="3" id='lookup.php?q=3'>baz</option>
   <option value="4"id='lookup.php?q=4'>bin</option>
</select>

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.

This entry was posted in programming and tagged , . Bookmark the permalink.



6 Responses to IE, JQuery, Hovering and Option Elements

  1. Jon UNITED STATES Mozilla Firefox Windows says:

    Thanks! The exact workaround I was looking for.

    Reply  |  Quote
  2. Dag NORWAY Mozilla Firefox Windows says:

    Hi. Could you provide a working example of this?

    Reply  |  Quote
  3. Blaze UNITED STATES Google Chrome Windows says:

    Thanks for the write up, you probably saved me 15 minutes of fumbling around in IE.

    Reply  |  Quote
  4. Yves LUXEMBOURG Mozilla Firefox Ubuntu Linux says:

    Did anyone find a solution to this for Webkit ?

    Reply  |  Quote
  5. Yves LUXEMBOURG Mozilla Firefox Ubuntu Linux says:

    I tried to use your code but I do not manage to get hover work for the options.

    I think [@selected] is deprecated as of now, but changing it to option[selected=’selected’] did not make a difference.

    Strangely, in your example code you subscribe on the “change”-event, which AFAIK gets only fired when you click on the option, whereas I need it on hover.

    Reply  |  Quote
  6. ke NETHERLANDS Google Chrome Ubuntu Linux says:

    Yves wrote:

    Strangely, in your example code you subscribe on the “change”-event, which AFAIK gets only fired when you click on the option, whereas I need it on hover.

    Yeah, what’s up with that? This way you have to click on the option to show the tooltip, don’t you?

    Reply  |  Quote

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>