Question

当我使用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');
  } 
});

Answer 1

尝试类似

<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：重点关注Tab键导航上显示选择元素的内容

1 个答案: