Question

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

奇怪的是，在试图通过jsfiddle进行复制时，我只能让Select2的第4版表现得像我在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
});

导致下拉列表关闭（或不响应）输入外的点击事件的原因是什么？

Answer 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
});

Answer 2

我找到与Venkata Sandeep相同的解决方案，如果您的body - 元素不是全高，而您只点击页面上的html - 元素，那么下拉列表就不会关。

我通过调整身体大小来解决它：

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

Answer 3

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

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

点击

3 个答案: