javascript - jQuery Select2 - 使用选项卡选择一个选项

Question

我希望能够使用箭头键找到我想要的 select2 选项，然后按 Tab 键选择该选项，然后像往常一样按 Tab 键转到下一个元素。

我已经有了打开 select2 的向下箭头:

$(document).on('keydown', '.select2', function(e) {
  if (e.originalEvent && e.which == 40) {
    e.preventDefault();
    $(this).siblings('select').select2('open');
  } 
});

我还可以使用箭头到达我需要去的地方。现在我正在努力使标签部分工作。

我假设 select2-search__field 在我按下键时有焦点，那是我将事件绑定(bind)到的元素？然后大概我需要获取当前突出显示的选项的值并触发 select2 更改？

我不是 100% 确定这是正确的方法，但我不太明白。

Answer 1

要实现这一点，您可以使用 selectOnClose: true:

$(document).on('keydown', '.select2', function(e) {
  if (e.originalEvent && e.which == 40) {
    e.preventDefault();
    $(this).siblings('select').select2('open');
  }
});

$('select').select2({
  selectOnClose: true
});

select {
  min-width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<select>
  <option>AAAAA</option>
  <option>BBBB</option>
  <option>CCCC</option>
  <option>DDDD</option>
  <option>EEEE</option>
  <option>FFFF</option>
  <option>GGGG</option>
</select>