5

我在多选表单中使用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
});

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

4

3 回答 3

2

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

我通过调整身体大小解决了这个问题： 

// CSS for the body element
body {
    min-height: 100vh;
    width: 100%; // probably you won't need the width.
}
于 2016-09-14T07:50:18.480 回答
2

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

这里是更新的 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
});
于 2016-02-11T13:45:05.203 回答
1

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

@supports (-webkit-touch-callout: none) {
  body {
    cursor: pointer;
  }
}
于 2021-03-11T16:53:48.630 回答