Javascript 如何识别具有多个的 SELECT 元素中的双击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2305945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to identify double click in SELECT element with multiple
提问by Joe
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.
我有一个带有 MULTIPLE 属性的 SELECT 元素。双击列表中的选项时，我想根据被单击的选项执行操作。
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?
我知道 OPTION 元素不处理 ondblclick 事件。如果我处理 SELECT 元素的 dblclick 事件，有什么方法可以识别双击了哪个选项？
<select size="4" name="MySelect" multiple="multiple" ondblclick="myFunction();">
<option ... />
...
</select>
Preferably cross-browser, but IE only would do.
最好是跨浏览器，但 IE 只能这样做。
EDIT
编辑
I obviously wasn't clear enough. What I need to do is identify which option was double-clickedfrom 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.
我显然不够清楚。我需要做的是确定在事件处理程序中双击了哪个选项（或者双击位于没有选项的 SELECT 元素区域）。查找 selectedIndex 将不起作用，因为 SELECT 元素具有 MULTIPLE 属性：如果用户在双击时按住 CTRL 或 SHIFT，将选择多个项目：我只想要实际双击的选项。
采纳答案by Harmen
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.
如果你双击一个项目，你就选择了它，所以你可以使用 this.selectedIndex。
回答by jiantongc
<select onDblClick="alert(this.value)">
<option>Barney</option>
<option>Ted</option>
<option>Marshall</option>
</select>
回答by Marius
Why can't you attach the event on the options? It works fine here (tested with and without jquery in Firefox 3.6).
为什么不能在选项上附加事件？它在这里工作正常（在 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>
回答by Gabriele Petrioli
Following what Harmen wrote .. the following will alert the value of the doubleclicked option .. (cross browser)
按照 Harmen 写的内容 .. 以下将提醒双击选项的值 ..（跨浏览器）
document.getElementById('selectID').ondblclick = function(e){
var evt = window.event || e;
var elem = evt.srcElement || evt.target;
alert(elem.value);
};?
回答by KarlosFontana
if you want the selected value in a new form, then use this combination: with either onclick or dblclick:
如果您希望以新形式显示所选值，请使用以下组合：使用 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=" Select "/>
</form>
and inside select_cust_process.php I have:
在 select_cust_process.php 里面我有：
$TBLrow = $_POST['mydropdownEC'];
echo $TBLrow;
回答by Cunning
Can't you wrap it with a <div/>? something like this
你不能用一个包裹它<div/>吗？像这样的东西
HTML:
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:
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.
我还没有测试过，但理论上它可以工作。我在许多表单元素上使用了这个技巧，但不幸的是不是双击的多选。
