如何使用焦點jquery事件打開下拉菜單<select>？

我試圖打開一個下拉式下拉菜單，當我按下鍵盤上的「Tab」鍵，並將我的元素聚焦。聚焦功能起作用，但觸發器不起作用。我的意圖是強制「點擊」事件，以便它打開。如何使用焦點jquery事件打開下拉菜單<select>？

這是我的HTML示例。 https://jsfiddle.net/jaelsvd/yqnoo5z9/或也是片段。

$(".myTab").focus(function(){ 
 
      
 
     $(".myTab").trigger("click"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="myTab"> 
 
    <option> Example 1 </option> 
 
    <option> Example 2 </option> 
 
    <option> Example 3 </option> 
 
    <option> Example 4 </option> 
 
    <option> Example 5 </option> 
 
    <option> Example 6 </option> 
 
    <option> Example 7 </option> 
 
    <option> Example 8 </option> 
 
    <option> Example 9 </option> 
 
</select> 
 
<select class="myTab"> 
 
    <option> 1 </option> 
 
    <option> 2 </option> 
 
    <option> 3 </option> 
 
    <option> 4 </option> 
 
    <option> 5 </option> 
 
    <option> 6 </option> 
 
    <option> 7 </option> 
 
    <option> 8 </option> 
 
    <option> 9 </option> 
 
</select> 
 
<select class="myTab" > 
 
    <option> Jael </option> 
 
    <option> Joe </option> 
 
    <option> Andrea </option> 
 
    <option> Toby </option> 
 
    <option> Bob </option> 
 
    <option> John </option> 
 
    <option> Alan </option> 
 
    <option> Mandy </option> 
 
    <option> Melody </option> 
 
</select>

來源

2017-07-28 Jael Saavedra

簡短的回答是：您無法以編程方式打開「'替代腳本進行更細粒度的控制 – charlietfl

是的，這就是我的想法：/ –

Click事件不會打開下拉列表

你可以做的就是改變下拉列表的大小，使其看起來開放

$(".myTab").focus(function(){ 

    $(".myTab").attr("size", 10); 
});

你可以稍後更改大小爲1

來源

2017-07-28 23:02:17

這是更接近開放它，雖然它移動你的框架和div下，可能需要使用z-index。但太多的忙碌。謝謝！ –

您還可以嘗試以下操作：

$(".myTab").focus(function(){ 

    var length = $('.myTab option').length; 
    //open dropdown 
    $(this).attr('size', length); 

    // to close 
    $(this).attr('size', 0); 
});

通過這樣做，您將得到確切大小的選項長度。

來源

2017-09-08 12:25:47

如何使用焦點jquery事件打開下拉菜單<select>？

回答

相關問題