Как определить двойной щелчок в элементе SELECT с несколькими

Question

У меня есть элемент SELECT с атрибутом MULTIPLE. При двойном щелчке по опции в списке я хочу выполнить действие, основанное на щелчке по опции .

Я понимаю, что элемент OPTION не обрабатывает событие ondblclick. Если я обработаю событие dblclick элемента SELECT, можно ли каким-то образом определить, какой параметр был дважды нажат?

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

Желательно, кросс-браузер, но IE только подойдет.

EDIT

Я явно не был достаточно ясен. Что мне нужно сделать, это определить , какая опция была дважды нажата из обработчика события (или чтобы двойной щелчок был в области элемента SELECT без опции). Поиск selectedIndex не сработает, так как элемент SELECT имеет атрибут MULTIPLE: если пользователь удерживает клавишу CTRL или SHIFT при двойном щелчке, будет выбрано более одного элемента: я хочу только тот параметр, который был фактически дважды нажат.

Answer 1

Попробуйте это:

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

Если вы дважды щелкнете по элементу, вы выберете его, чтобы использовать this.selectedIndex.

Answer 2

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

Answer 3

Почему вы не можете прикрепить событие к опциям? Здесь все работает нормально (протестировано с и без jquery в 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 4

После того, что написал Хармен .. следующее оповестит значение опции двойного щелчка .. (кросс-браузер)

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

Answer 5

Не можете ли вы обернуть его <div/>? как то так

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);
};

Я не проверял, но теоретически это может сработать. Я использовал этот прием для многих элементов формы, но, к сожалению, не для множественного выбора для двойного щелчка.

Answer 6

, если вы хотите выбрать выбранное значение в новой форме, используйте эту комбинацию: с помощью onclick или 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>

и внутри select_cust_process.php у меня есть:

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