Capture mouse events for HTML option element on IE
-
10-07-2019 - |
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.
Solution
Put simply there are no solutions that use the native select element.
OTHER TIPS
You can do:
$("#madness").val()
To get the value of the selected <option />.