如何在SELECT元素中雙擊多次識別

Question

我有一個帶有MULTIPLE屬性的SELECT元素。 雙擊列表中的選項時，我想根據單擊的選項執行操作 。

我知道OPTION元素不處理ondblclick事件。 如果我處理SELECT元素的dblclick事件，是否有某種方法可以識別哪個選項被雙擊？

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

最好是跨瀏覽器，但IE只會這樣做。

編輯

我顯然不夠清楚。 我需要做的是確定在事件處理程序中雙擊哪個選項 （或雙擊是在沒有選項的SELECT元素的區域中）。 由於SELECT元素具有MULTIPLE屬性，因此查找selectedIndex不會這樣做：如果用戶在雙擊時按住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

為什么不能在選項上附上活動？ 它在這里工作正常（在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

遵循Harmen所寫的內容..以下內容將提醒doubleclicked選項的價值..（跨瀏覽器）

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

我沒有測試過它，但理論上它可能會起作用。 我在許多表單元素上使用了這個技巧，但不幸的是，雙擊不是多重選擇。