Question

由于传统的前端，我得到了这个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>

Answer 1

在this question

的zDaniels优秀答案的基础上

我已经创建了一个可以安装bower的垫片来解决select2标签索引问题。

$ bower install select2-tab-fix

的来源和文件

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

Answer 2

我认为应该试试这个：

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

events

上的文档

打开jquery select2下拉列表中断tabindex

2 个答案: