I'm trying to open automatically a drop downdown menu when I hit the "Tab" key on the keyboard and focus my element.The focus function works, but the trigger doesn't. My intention is to force the "click" event so it opens up.

Here are my HTML examples. / or also the snippet.

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

<script src=".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>

I'm trying to open automatically a drop downdown menu when I hit the "Tab" key on the keyboard and focus my element.The focus function works, but the trigger doesn't. My intention is to force the "click" event so it opens up.

Here are my HTML examples. https://jsfiddle/jaelsvd/yqnoo5z9/ or also the snippet.

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

<script src="https://ajax.googleapis./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>

• javascript
• jquery
• html
• drop-down-menu
• html-select

• Short answer is: you can't open a <select> programmatically. Use a <select> replacement script for more granular control – charlietfl Commented Jul 28, 2017 at 22:59
• Yeah, that's what I thought :/ – Jael Saavedra Commented Jul 28, 2017 at 23:34

2 Answers 2

click event does not open the drop down list

what you can do is change the size of the drop down list, so that it appears open

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

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

you can later change the size to 1

You can also try the following :

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

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

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

By doing this you will get the option length of exact size.