打开 jquery select2 下拉列表中断 tabindex答案

【问题标题】：Opened jquery select2 dropdown breaks tabindex打开 jquery select2 下拉列表中断 tabindex
【发布时间】：2017-02-14 16:25:52
【问题描述】：

由于遗留的前端，我得到了这个 hacky 监听器，用于在关注 select 元素时打开我的 select2 (v4.0) 下拉菜单。它工作得很好，除了当我在打开的 select2 上按 tab 时，我的 tabindex 以某种方式设置回 1。当我从打开的下拉列表中点击选项卡时，如何使我的下拉列表关闭并聚焦输入#4？

var openedSelectEl;
// open select2 dropdown on focus
$(document).on('focus', 'select:enabled + span .select2-selection--single', function(e) {
    openedSelectEl = $(this).parent().parent().siblings('select');
    openedSelectEl.select2('open');
});

$("#3").select2({
  data: [{
    id: 'f00',
    text: 'f00'
  }, {
    id: 'b4r',
    text: 'b4r'
  }, {
    id: 'b4z',
    text: 'b4z'
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div><input type="text" id="1" tabindex="1" /></div>
<div><input type="text" id="2" tabindex="2" /></div>
<div><select name="2"   id="3" tabindex="3"></select></div>
<div><input type="text" id="4" tabindex="4"/></div>

【问题讨论】：

标签： jquery jquery-select2 select2 jquery-select2-4

【解决方案1】：

我觉得应该试试这个：

$(yourSelectSelectors).on("select2:close", function (e) {
    e.target.focus();
});`

events 上的文档

【讨论】：

【解决方案2】：

以 zDaniels 为基础，this question 的出色回答

我创建了一个 Bower 可安装垫片，可以解决 select2 选项卡索引问题。

$ bower install select2-tab-fix

来源和文档位于

https://github.com/peledies/select2-tab-fix

【讨论】：