views:

342

answers:

3

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 ... />
    ...
</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.

+1  A: 

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>
Marius
I believe he **needs** it work with IE, firefox is the optional piece.
Nick Craver
I tried attaching an event (not using jquery as above), and it didn't work with IE :( As Nick Craver said, IE is mandatory, cross-browser is nice-to-have (a corporate environment that is still using IE6!!!)
Joe
+1  A: 

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.

Harmen
No, the select allows multiple selection. this.selectedIndex will give the index of the *first* selected option, not necessarily the one that was double-clicked.
Joe
A: 

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

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