blocks|key|4022590|text|可以确认，由于某些原因，防止事件似乎不起作用，因此您可以在超时之后关闭下拉列表：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4022591|$("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);
++++}++++
});|code-block|syntax|javascript|4022592|这是一个有用的小提琴：http://jsfiddle.net/obq3yLf2/|offset|length|4022593|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/obq3yLf2/^0|0|0|B|T|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Can confirm, preventing events seems to not work for some reason, so you can just close the dropdown after some timeout:</p>

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

<p>Here's a working fiddle: <a href="http://jsfiddle.net/obq3yLf2/" rel="noreferrer">http://jsfiddle.net/obq3yLf2/</a></p>


blocks|key|4022601|text|您不需要超时才能完成此任务，下面是我的示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4022602|$('#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();
++++}
});|code-block|syntax|javascript|4022603|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You don't require a timeout to make this work, here's my example:</p>

<pre><code>$('#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();
    }
});
</code></pre>


blocks|key|4022605|text|另一个简单的实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4022606|$('select').on('select2:unselect',+function(evt)+{
++++$(this).select2({
++++++++placeholder+:+{
++++++++++++id+:+'',
++++++++++++text+:+'---None+Selected---'
++++++++},
++++++++allowClear+:+true,
++++++++theme+:+"bootstrap"
++++}).select2('close');
});|code-block|syntax|javascript|4022607|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Another simple Implementation:</p>

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


blocks|key|4022655|text|在取消其中一个项目之后，我遇到了一个短期延迟的问题，这个解决方案为我解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4022656|$(this).select2({
++++multiple:+'multiple',
}).on("select2:unselecting",+function(e)+{
++++var+self+=+$(this);
++++setTimeout(function()+{
++++++++self.select2('close');
++++},+0);
});|code-block|syntax|javascript|4022657|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I had a problem with a short delay after deselecting one of the items and this solution fixed that issue for me:</p>

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


blocks|key|3527897|text|这是你的回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3527898|​|3527899|<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>|code-block|syntax|javascript|3527900|3527901|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Here is your answer:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"&gt;&lt;/script&gt;


&lt;select id="my-select"&gt;
&lt;option&gt;Test1&lt;/option&gt;
&lt;option&gt;Test2&lt;/option&gt;
&lt;option&gt;Test3&lt;/option&gt;
&lt;/select&gt;



&lt;script&gt;
$('#my-select').select2().on('select2:opening', function(currentEvent) {
  currentEvent.preventDefault();
});
&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4022663|text|++++$("select").select2({
++++++++allowClear:+true
++++}).on("select2:unselecting",+function+(e)+{
++++++++$(this).data('unselecting',+true);
++++}).on("select2:opening",+function+(e)+{
++++++++if+($(this).data('unselecting'))+{
++++++++++++$(this).removeData('unselecting');
++++++++++++e.preventDefault();
++++++++}
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4022664|这将在关闭/清除select2组件时不发生任何闪烁。在js中的任何位置添加上述代码。|unstyled|4022665|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>    $(&quot;select&quot;).select2({
        allowClear: true
    }).on(&quot;select2:unselecting&quot;, function (e) {
        $(this).data('unselecting', true);
    }).on(&quot;select2:opening&quot;, function (e) {
        if ($(this).data('unselecting')) {
            $(this).removeData('unselecting');
            e.preventDefault();
        }
    });
</code></pre>
<p>This will work without any flickering of body while closing/clearing the select2 component.
Add the above code anywhere in js.</p>


<p>Seems that select2 4 opens by default the dropdown when clearing the current selected item. Previous versions of select2 didn't seem to have that behaviour and I'm trying to achieve it but no luck for now.</p>

<p>Does anyone know how to hook into the clear event so we can disable it's default behaviour and clear the selected option without opening the dropdown?</p>

<p>Cheers,
Al</p>


Disable dropdown opening on select2 clear

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在默认情况下，select2 4在清除当前选定项时打开下拉列表。早期版本的select2似乎没有这种行为，我正在努力实现它，但目前没有运气。是否有人知道如何连接到clear事件，这样我们就可以禁用它的默认行为，并在不打开下拉列表的情况下清除所选选项？干杯，阿尔

问禁用select2清除上的下拉打开
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用select2清除上的下拉打开EN