Question

我使用select2添加标签。有一个选项可以使选择列表在选择项目（closeOnSelect时保持打开状态，但是只有在选择时按下Shift键，我才能做到这一点？尝试将closeOnSelect设置为false，以查看仅在按下Shift键时我想要发生的事情。

以下是API选项的列表：https://select2.org/configuration/options-api

这是事件列表：https://select2.org/programmatic-control/events

$(".form-control").select2({
    tags: true,
    tokenSeparators: [',', ' '],
    closeOnSelect: true
})
.on('select2:select', function (e) {
    // How can I reach shiftKey here?
    if( e.shiftKey )
    {
        alert('How do I make closeOnSelect: false happen here?');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control" multiple="multiple" style="width: 300px">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

Answer 1

我认为您有两种选择。您可能不知道，但是select2似乎具有类似的功能；它检查是否按住控制键。让我们看一下select2.js，然后搜索// Don't close if the control key is being held。我认为直接修改插件的该部分很容易，而不是自己实现。
（我找不到覆盖函数的方法。）

但是，我也找到了方法。
但也许有时无法阻止关闭select2 ...

首先，您需要在第二部分进行keydown和keyup事件。

// jQuery keydown doesn't work for some reason.(It seems this plugin is a bit tricky.)
// This event is used when the text box has focus.
document.getElementsByClassName('select2-search__field')[0].onkeydown = function(e) {
    if (e.keyCode === 16) {
        isShiftDown = true;
    }
}
document.getElementsByClassName('select2-search__field')[0].onkeyup = function(e) {
    if (e.keyCode === 16) {
        isShiftDown = false;
    }
}

// This event is used when the text box doesn't has focus.
$(window).on("keydown", function(e) {
    if (e.keyCode === 16) {
        isShiftDown = true;
    }
}).on("keyup", function(e) {
    if (e.keyCode === 16) {
        isShiftDown = false;
    }
});

第二，添加closing事件。

// Closing (if you return false in this event, select2 doesn't close.)
.on('select2:closing', function () {
    // To be exact, there's no need to return true.
    return !isShiftDown;
});

当然，即使成功实现，Ctrl键功能仍然存在。
For Example.

已更新
添加逻辑，考虑“如果有多个”和“如果不存在”。以防万一。

var inputs = document.getElementsByClassName('select2-search__field');
if (inputs.length > 0) {
    for (var i=0; i<inputs.length; i++) {
        inputs[i].onkeydown = function(e) {
            if (e.keyCode === 16) {
                isShiftDown = true;
            }
        }
        inputs[i].onkeyup = function(e) {
            if (e.keyCode === 16) {
                isShiftDown = false;
            }
        }
    }
}

仅在换档时保持select2打开

1 个答案: