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

Question

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.net/jaelsvd/yqnoo5z9/ or also the snippet.

   $(".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>

Solution 1

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

Solution 2

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.

Comments

[charlietfl]

Short answer is: you can't open a <select> programmatically. Use a <select> replacement script for more granular control

[Jael Saavedra]

Yeah, that's what I thought :/

[Jael Saavedra]

This is the closer to open it up, although it moves your frame and divs under, might need to use a z-index instead. But too much hustle. Thank you!

[Don'tDownvoteMe]

Correct me if I am wrong but I think .change() event would have worked equally well.