在 select2 clear 上禁用下拉打开

Question

似乎 select2 4 在清除当前选定项目时默认打开下拉菜单。以前版本的 select2 似乎没有这种行为，我正在尝试实现它，但现在没有运气。

有谁知道如何挂钩 clear 事件，以便我们可以禁用它的默认行为并在不打开下拉菜单的情况下清除所选选项？

干杯， 铝

Answer 1

您不需要超时来完成这项工作，这是我的示例：

$('#my-select').select2({
    allowClear: true
}).on('select2:unselecting', function() {
    $(this).data('unselecting', true);
}).on('select2:opening', function(e) {
    if ($(this).data('unselecting')) {
        $(this).removeData('unselecting');
        e.preventDefault();
    }
});

Answer 2

可以确认，由于某种原因，阻止事件似乎不起作用，因此您可以在超时后关闭下拉列表：

$("select").select2({
    allowClear: true
}).on("select2:unselecting", function(e) {
    $(this).data('state', 'unselected');
}).on("select2:open", function(e) {
    if ($(this).data('state') === 'unselected') {
        $(this).removeData('state'); 

        var self = $(this);
        setTimeout(function() {
            self.select2('close');
        }, 1);
    }    
});

这是一个有效的小提琴：http://jsfiddle.net/obq3yLf2/

Answer 3

我在取消选择其中一项后遇到了短暂延迟的问题，此解决方案为我解决了该问题：

$(this).select2({
    multiple: 'multiple',
}).on("select2:unselecting", function(e) {
    var self = $(this);
    setTimeout(function() {
        self.select2('close');
    }, 0);
});

Answer 4

另一个简单的实现：

$('select').on('select2:unselect', function(evt) {
    $(this).select2({
        placeholder : {
            id : '',
            text : '---None Selected---'
        },
        allowClear : true,
        theme : "bootstrap"
    }).select2('close');
});

Answer 5

这是你的答案：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


<select id="my-select">
<option>Test1</option>
<option>Test2</option>
<option>Test3</option>
</select>



<script>
$('#my-select').select2().on('select2:opening', function(currentEvent) {
  currentEvent.preventDefault();
});
</script>