如何打开下拉菜单 <select> 且焦点 jquery 事件？

Question

我试图在按下键盘上的 "Tab" 键并聚焦时自动打开下拉菜单，我的 element.The 聚焦功能有效，但触发器没有。我的意图是强制 "click" 事件打开。

这是我的 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>

Answer 1

点击事件不打开下拉列表

您可以更改下拉列表的大小，使其显示为打开状态

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

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

您可以稍后将大小更改为 1

Answer 2

您也可以尝试以下方法：

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

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

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

通过这样做，您将获得精确尺寸的选项长度。

如何打开下拉菜单 <select> 且焦点 jquery 事件？

How can I open a dropdown <select> with focus jquery event?

html

javascript

jquery

html-select

drop-down-menu