Javascript：在选项卡键导航的焦点上显示select元素的内容

当使用tab键导航到select元素时，我想在焦点上显示它的所有内容（对于下面的代码段）

选择{
宽度：200px；
边框：1px实心#aaa；
边界半径：4px；
高度：28px；
溢出：隐藏；
}

挑选水果
苹果
香蕉

试试下面的方法

<select id="select2" class="select2" >
  <option value="" disabled selected>Select Fruit</option>
  <option value="1">Apple</option>
  <option value="2">Banana</option>
</select>



document.getElementById("select2").addEventListener("focus", myFunction);
 function myFunction() {
     var e = document.getElementById("select2");
      console.log(e.options[e.selectedIndex].value);
 }

挑选水果
苹果
香蕉
document.getElementById（“select2”）.addEventListener（“焦点”，myFunction）；
函数myFunction（）{
var e=document.getElementById（“select2”）；
log（e.options[e.selectedIndex].value）；
}

那么您在原始javascript中尝试了什么？

select2

根据我的简要阅读，没有使用浏览器默认的Select元素，而是使用自己完全定制的实现来替换它。如果知道不能触发select元素来打开programmaticallySelect2是一个基于jQuery构建的组件库，它添加了很多特性，我也不会感到惊讶。重写依赖jQuery而不依赖jQuery的库对于志愿者来说太难了。