在 select2 clear 上禁用下拉打开

Posted 2023-05-07

【中文标题】在 select2 clear 上禁用下拉打开

【英文标题】：Disable dropdown opening on select2 clear

【发布时间】：2015-06-19 12:49:16

【问题描述】：

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

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

干杯， 铝

【问题讨论】：

假设这是一个单选，您可以在select2:closing 紧跟在select2:unselect 之后触发的事件上preventDefault。有时间我可以写一个更完整的答案。

感谢 Kevin，我试了一下，但在 select2:closing我已经在jsfiddle.net/r56zh872 整理了一个快速小提琴，任何帮助将不胜感激。

@KevinBrown 是否针对这种情况创建了任何上游问题？

@VladislavRastrusny 我不认为这是一个错误，but this ticket was opened about it。

【参考方案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();
    
);

【讨论】：

如果我在一个页面中有多个 select2 怎么办？

我假设您的意思是将上述内容应用于多个 select2 元素？在这种情况下，您可以将 #my-select 替换为 .selects 并将该类添加到您的选择元素中。

【参考方案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/

【讨论】：

干杯山姆。解决预防问题之前的良好解决方法。

第二个解决方案更好，没有超时

【参考方案3】：

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

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

【参考方案4】：

另一个简单的实现：

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

【参考方案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>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。