jQuery-Select list option hover

问题:

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?

回答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      } });

回答2:

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

    ...    ... 

The hover event will work on the option elements:

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

回答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

转载请标明出处:jQuery-Select list option hover

文章来源: jQuery-Select list option hover

跳转到

• 问题:
• 回答1:
• 回答2:
• 回答3:

Close