Question

I’m trying to display extra information to the user as they highlight different options in an open select element.

I’m using the keydown event of the select element and have it working when the keyboard (arrow keys) are used. Basically I track how far and in which direction the user goes from the selected item. With that info, I know which option is highlighted.

My question is: how do I know which option is highlighted if the user just uses the mouse?

Answer 1

This works in FF only: http://jsfiddle.net/umDNF/2/ (code below as well). You might want to think about going with a custom dropdown as opposed to a box. Maybe something like this http://labs.abeautifulsite.net/jquery-selectBox/ where there are tons of hooks to trigger the display of your info.

Html:

<select>
  <option data-info="Option one">1</option>
  <option data-info="Option two">2</option>
  <option data-info="Option three">3</option>
  <option data-info="Option four">4</option>
</select>

<div class="metadata">Placeholder</div>

Javscript (using jquery):

    $('option').live('mouseenter', function(){
       $('.metadata').html( $(this).attr('data-info'));         
    });