如何在SELECT元素中双击多次识别

时间:2010-02-21 13:06:32

标签: javascript html javascript-events

我有一个带有MULTIPLE属性的SELECT元素。双击列表中的选项时,我想根据被点击的选项采取行动。

我知道OPTION元素不处理ondblclick事件。如果我处理SELECT元素的dblclick事件,是否有某种方法可以识别哪个选项被双击?

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

最好是跨浏览器,但IE只会这样做。

修改

我显然不够清楚。我需要做的是从事件处理程序中识别双击哪个选项(或者双击是在没有选项的SELECT元素的区域中)。由于SELECT元素具有MULTIPLE属性,因此查找selectedIndex不会这样做:如果用户在双击时按住CTRL或SHIFT,则会选择多个项目:我只想要实际双击的选项。

6 个答案:

答案 0 :(得分:7)

试试这个:

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

如果双击某个项目,则选择它,这样就可以使用this.selectedIndex。

答案 1 :(得分: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>

答案 2 :(得分:3)

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

答案 3 :(得分:1)

遵循Harmen写的内容..以下内容将提醒doubleclicked选项的价值..(跨浏览器)

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

答案 4 :(得分:0)

如果您想要新表单中的选定值,请使用此组合: 使用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;

答案 5 :(得分:0)

你不能用members换行吗?像这样的东西

HTML:

<div/>

JS:

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

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