Select2 下拉菜单不会在单击时关闭

Posted

技术标签:

【中文标题】Select2 下拉菜单不会在单击时关闭【英文标题】:Select2 dropdown doesn't close on click 【发布时间】:2015-10-02 11:28:44 【问题描述】:

我在多选表单中使用Select2 (v4),并且难以获得我需要的下拉关闭功能。我将closeOnSelect 设置为false,因此用户可以轻松添加多个值。我在测试站点上看到的是,在除 ios 之外的所有浏览器上,当您在下拉区域之外单击时,下拉列表会关闭(这是所需的行为)。在 iOS 上,关闭它的唯一方法是在输入中单击。

奇怪的是,在尝试通过 jsfiddle 进行复制时,我只能获得第 4 版的 Select2 以按照我在 iOS 上看到的方式运行 - http://jsfiddle.net/8g27t277/

我有另一个使用 Select2 v3.4.6 的 jsfiddle,它显示了我想要在所有浏览器中使用的点击关闭功能 - http://jsfiddle.net/0tefq3yz/

测试 html

<select id="options" size="9">
    <option value="357">One</option>
    <option value="358">Two</option>
    <option value="359">Three</option>
    <option value="360">Four</option>
    <option value="361">Five</option>
</select>

测试js:

$('#options').select2(
    "placeholder": "Pick multiple options",
    "multiple": true,
    "closeOnSelect": false
);

是什么导致下拉菜单关闭(或不关闭)以响应输入之外的点击事件?

【问题讨论】:

点击下拉输入实际上是唯一导致它关闭的事情,所以我不确定我是否理解你在说什么。你能详细说明一下吗? 请在链接***.com/a/46251972/2134005查看我的评论 【参考方案1】:

我确实有同样的问题,过了一段时间我发现点击 html 页面并不能完成这项工作。选择 2 下拉关闭将在正文标签内单独工作。如果您跨越了整个页面(整个页面都覆盖在 body 标记中),那么单击任何位置都会关闭下拉菜单。

here is updated JSFiddle

***HTML***
<body class='bodyClass'>
  <div class='mainClass'>
<select id="options" size="9">
  <option value="357">One</option>
  <option value="358">Two</option>
  <option value="359">Three</option>
  <option value="360">Four</option>
  <option value="361">Five</option>
</select>

***CSS***
select 
width: 300px;

.bodyClass
  width:100%;
  height:500px;


***JS***

$('#options').select2(
"placeholder": "Pick multiple options",
    "multiple": true
);

【讨论】:

【参考方案2】:

我找到了与Venkata Sandeep 相同的解决方案,如果您的body 元素不是全高并且您仅单击页面上的html 元素,则下拉菜单不会关闭。

我通过调整主体大小解决了这个问题:

// CSS for the body element
body 
    min-height: 100vh;
    width: 100%; // probably you won't need the width.

【讨论】:

【参考方案3】:

这个对我有帮助。 这仅识别 IOS 设备并使用此光标修复

@supports (-webkit-touch-callout: none) 
  body 
    cursor: pointer;
  

【讨论】:

这是唯一真正帮助我的解决方案

以上是关于Select2 下拉菜单不会在单击时关闭的主要内容,如果未能解决你的问题,请参考以下文章

Tailwind 和 Vue-Router - 单击菜单项时下拉菜单不会关闭

单击时菜单不切换(关闭)

单击时 select2-rails 标签下拉菜单不起作用

仅使用 CSS 在悬停时显示下拉菜单并在单击时关闭

下拉菜单不会出现在elementor Wordpress中[关闭]

select2 - 单击时未选择下拉选项