jQuery-Select list option hover

Question

I want to alert an option when the mouse-cursor is over it. I use this code:

$("select > option").hover(function ()
    { 
        alert($(this).attr("id"));
    });

Unfortunately, this is neither working in IE nor in FF.

Can someone give me a hint please?

Answer 1

You can try this.

$("select").hover(function (e)
{
     var $target = $(e.target); 
     if($target.is('option')){
         alert($target.attr("id"));//Will alert id if it has id attribute
         alert($target.text());//Will alert the text of the option
         alert($target.val());//Will alert the value of the option
     }
});

Answer 2

If you make a "listbox" type select box by adding a "size=x" attribute like this:

<select size="3">
   <option>...</option>
   <option>...</option>
</select>

The hover event will work on the option elements:

$('option').hover(function(){
     //code here
});

Answer 3

Here's a workaround (quite decent I guess)-

• Use mouseover event to set the size of the select box equal to the no. of its children
• Use mouseenter event to get the options. mouseenter works on options perfectly when size attribute is there (we all know that now)
• Use mouseout event to set the size of the select box back to 1, to get our normal select box back :)

JSFiddle