Get event data from an HTML drop down list (the list that drops down when a drop down list is selected) using jQuery / plain jscript.

Question

Is it possible to get event data from an HTML drop down list (i.e. the list that drops down, when you click on a drop down list) using jQuery / plain jscript? I am looking to capture:

1. the number of times a user hovers over <option> before selecting the item they require.
2. the duration of the hover before making a selection.

At present, the events i am able to capture are for the dropdownlist element itself not the list that drops down once it is clicked upon.

Answer 1

<select id="test">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
    <option value="5">five</option>
</select>

$(function(){
    $("#test option").mouseover(function(){
     console.log($(this).val());
    })
})

Works for me. You should be able to extrapolate from that to add some timers and counters to the mouseover/hover event to capture the data you want.

Answer 2

Of the mainstream browsers only Firefox supports mouseover/mouseout events on options so you should probably abandon the first part.

As to the second part, you may be able to do something with starting a timer when the <select>'s focus event fires and stopping it when the change event fires, though the focus event is not precisely what you're after. I don't think there is an event that fires when the <select> is expanded.