我想在使用Tab键导航到选择元素时(在下面的代码片段中)集中显示所有内容。



select {
  width: 200px;
  border: 1px solid #aaa;
  border-radius: 4px;
  height: 28px;
  overflow: hidden;
}

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





我在jQuery中找到了一个解决方案,但我想要普通JavaScript中无法实现的相同功能。

jQuery代码:-

$('.select2').select2({
  minimumResultsForSearch: 20
});

$(document).on('focus', '.select2.select2-container', function (e) {
  var isOriginalEvent = e.originalEvent
  var isSingleSelect = $(this).find(".select2-selection--single").length > 0
  if (isOriginalEvent && isSingleSelect) {
    $(this).siblings('select:enabled').select2('open');
  }
});

最佳答案

尝试类似

<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);
 }

关于javascript - Javascript:重点关注Tab键导航上显示选择元素的内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59456718/

10-16 15:49
查看更多