如何识别多个SELECT元素中的双击

Question

我有一个带有 MULTIPLE 属性的 SELECT 元素。 双击列表中的选项时，我想根据单击的选项采取操作。

我知道 OPTION 元素不处理

ondblclick

事件。 如果我处理 SELECT 元素的

dblclick

事件，是否有某种方法可以识别双击了哪个选项？

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

最好是跨浏览器，但只能用IE。

编辑

我显然还不够清楚。 我需要做的是从事件处理程序中识别哪个选项被双击（或者双击是在没有选项的 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)" size="10">  
   <option>Barney</option>
   <option>Ted</option>
   <option>Marshall</option>
</select>

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

如果项目公开（未在下拉列表中折叠），则双击会更有意义，因此我将

size="10"

添加到

<select>

标记以公开值并使双击更加真实（运行代码以查看).

Answer 3

为什么不能将事件附加到选项上？它在这里工作得很好（在 Firefox 3.6 中使用和不使用 jquery 进行了测试）。

<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

如果您希望所选值采用新形式，请使用以下组合： 使用 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;

Answer 6

你不能用

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

我还没有测试过，但理论上它可能有效。我在许多表单元素上使用了这个技巧，但不幸的是没有双击多重选择。