Capture mouse events for HTML option element on IE

Question

For Internet Explorer only it seems that the target (srcElement) of clicks,mousedowns,mouseups,mouseovers,etc on <select /> elements will not be tied to the <option /> element.

Given the following HTML:

<select id="madness">
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="2">Three</option>
</select>

and this basic jQuery event handler:

$("#madness").mousedown(function(e){
   alert(e.target.value); //jQuery pushes srcElement into the target for us here
});

The object that is in e.target or e.srcElement is always equal to the <select /> and not the <option />.

I decided to get creative and try to use document.elementFromPoint(e.clientX,e.clientY) and that returns the SELECT element as well.

That brings the question, is there any way to determine the <option />inside of a <select />via event arguments,coordinates, or anything else? I'm aware that I can fake this out with a scrollable div of checkboxes. For the purposes of this question, I'd like any solutions which can use the native select element.

Answer 1

Put simply there are no solutions that use the native select element.

Answer 2

You can do:

$("#madness").val()

To get the value of the selected <option />.