jquery - Select2 下拉菜单在 Cordova/Phonegap 中分离

Question

我在我的 Cordova/Phonegap 应用程序中使用 Select2 下拉菜单，它运行良好。除非有人滚动背景，否则下拉内容会与下拉菜单分离，这会给用户带来糟糕的体验。

有谁知道如何用 CSS 或 jQuery 解决这个问题？

我通常像这样初始化它:

$(".search__box").select2({
              minimumResultsForSearch: Infinity,
              width: '100%'
});

然后代码是这样的:

<script type="text/ons-template" id="home.html">
<ons-navigator title="Navigator" var="kNavigator">

<div class="home-page wrapper">
  <select multiple="multiple" class="search__box form-control" name="search__box">
  </select>
</div>

</ons-navigator>  
</script>

它在 iOS 和 Android 上都发生了......甚至在浏览器中测试它时也是如此。我怀疑这可能是由于在 home.html 模板之外生成了 select2-container ...但我已经尝试了一切，但我迷路了:(

Answer 1

最好在用户滚动时关闭 select2。所以不会出现这样的问题。实际上，它是select2 的默认行为r，我不知道为什么它不触发您的应用程序。!如果您需要，我可以帮助您滚动关闭 `select2'。

第一种方法

$(window).on('scroll', function(){
   $("#select2-drop-mask").click();
});

第二种方法

$(window).on('scroll', function(){
  ("#mySelectElement").select2("close");
});

第三种方法

$(window).on('scroll', function(){
  $("#mySelectElement").select2().trigger("select2:close");
});

如果您愿意，您还可以将此与 resize 功能结合使用作为故障保护。希望这对你有帮助。

$(window).on('scroll resize', function(){
  $("#select2-drop-mask").click();
});