How to identify a double click in a SELECT element with multiple

Question

I have a SELECT element with a MULTIPLE attribute. When I double-click an option in the list, I want to perform a click-based action .

I understand that the OPTION element does not handle the ondblclick event. If I handle the dblclick event of a SELECT element, is it possible to somehow determine which option was double-clicked?

<select size="4" name="MySelect" multiple="multiple" ondblclick="myFunction();"> <option ... /> ... </select> 

A cross browser is preferred, but only IE will do.

EDIT

I was obviously not clear enough. What I need to do is determine which was double clicked from the event handler (or that the double click was in the area of ​​the SELECT element with no option). The selectedIndex search will not be performed, since the SELECT element has the MULTIPLE attribute: if the user holds CTRL or SHIFT when double-clicking, several elements will be selected: I only need the option that was actually double-clicking.

Answer 1

Try the following:

 document.getElementById('selectID').ondblclick = function(){ alert(this.selectedIndex); // or alert(this.options[this.selectedIndex].value); }; 

If you double-click on an item, you select it so you can use this.selectedIndex.

Answer 2

Why can't you attach an event to parameters? It works great here (tested with and without jQuery in Firefox 3.6).

 <select size="4" name="MySelect" multiple="multiple"> <option>hello</option> <option>aoeu</option> <option>ieao</option> <option>.yao</option> </select> <script type="text/javascript"> $(function(){ $("option").bind("dblclick", function(){ alert($(this).text()); }); }); </script> 

Answer 3

 <select onDblClick="alert(this.value)"> <option>Barney</option> <option>Ted</option> <option>Marshall</option> </select> 

Answer 4

Following what Harmen wrote, the following will warn the value of the doubleclicked option. (cross browser)

 document.getElementById('selectID').ondblclick = function(e){ var evt = window.event || e; var elem = evt.srcElement || evt.target; alert(elem.value); };​ 

Answer 5

if you want to get the selected value in a new form, use this combination: using either onclick or dblclick:

  <form name="Editcust" action="select_cust_process.php" method="post"> <select name="mydropdownEC" onMouseOver="this.size=10;" onclick='this.form.submit()'> <option ... /> ... </select> <br /><input type="submit" name="btn_submit" value="&nbsp;&nbsp;Select&nbsp;&nbsp;"/> </form> 

and inside select_cust_process.php I have:

  $TBLrow = $_POST['mydropdownEC']; echo $TBLrow; 

Answer 6

Can you wrap it with <div/> ? something like that

HTML:

 <select> <option value="x"> Option text goes here <div class="option-dbclickable" style="position:absolute; left:0; right:0; top:0; bottom:0; z-index:999;"></div> </option> </select> 

JS:

 document.getElementsByClassName('.option-dbclickable').ondblclick = function(){ alert(this.parentNode.value); }; 

I did not test it, but theoretically it could work. I used this trick in many form elements, but unfortunately, not a multiple choice for double-clicking.