How to identify double click in SELECT element with multiple

I have a SELECT element with the MULTIPLE attribute. When double-clicking on an option in the list, I want to take an action based on the option being clicked.

I understand that the OPTION element doesn't handle the ondblclick event. If I handle the dblclick event of the SELECT element, is there some way I can identify which option was double-clicked?

<select size="4" name="MySelect" multiple="multiple" ondblclick="myFunction();">
    <option ... /开发者_StackOverflow中文版>
    ...
</select>

Preferably cross-browser, but IE only would do.

EDIT

I obviously wasn't clear enough. What I need to do is identify which option was double-clicked from within the event handler (or that the double-click was in an area of the SELECT element without an option). Looking for selectedIndex won't do as the SELECT element has the MULTIPLE attribute: if the user holds CTRL or SHIFT when double-clicking, more than one item will be selected: I only want the option that was actually double-clicked.

---

Try this:

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.

---

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

---

Why can't you attach the event on the options? It works fine 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>

---

Following what Harmen wrote .. the following will alert 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);
};​

---

if you want the selected value in a new form, then use this combination: with 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;

---

Can't you wrap it with a <div/>? something like this

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 haven't tested it but it theoretically might work. I used this trick on many form elements but unfortunately not a multiple select for double click.