在 select2 clear 上禁用下拉打开

Question

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

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

干杯，阿尔

Answer 1

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

$("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);
    }    
});

这是一个有效的 fiddle：http://jsfiddle.net/obq3yLf2/

Answer 2

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

$('#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 3

另一个简单的实现：

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

Answer 4

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

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

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>

在 select2 clear 上禁用下拉打开

Disable dropdown opening on select2 clear

jquery

jquery-select2