Question

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

我已经使用向下箭头打开select2，其中包含以下内容：

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

我也可以使用箭头来获取我需要去的地方。现在我正在努力使标签部分工作。

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

我不是100％确定这是正确的做法，但我无法弄明白。

Answer 1

要实现此目的，您可以使用selectOnClose: true：

＆＃13;

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

＆＃13;

select {
  min-width: 150px;
}

＆＃13;

<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>

＆＃13;

Answer 2

只需在代码中添加以下行即可。

$(document).on("select2:close", '.select2-hidden-accessible', function () { $(this).focus(); });

您的问题将得到解决。

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

2 个答案: