Select2打开select的下拉菜单 [英] Select2 open dropdown over the select

问题描述

我想要类似第一个示例的内容 https://material.angular.io/components /select/overview
我尝试了 Select2更改容器位置中提供的所有方法.
它们可以正常工作，但是下拉菜单在打开后会自动关闭！

I want something like the first example here https://material.angular.io/components/select/overview
I tried all the methods provide here Select2 change container position .
They work , BUT the dropdown is closed automatically right after it opens!

之所以发生这种情况，是因为该下拉列表也正获得click事件，因为该下拉列表正好在鼠标光标下方打开！

This happening because the dropdown is also getting the click event because the dropdown is opening exactly under the mouse cursor !

我对此进行了测试

.on('select2:open', function (e) {
      var container = $('.select2-container .select2-dropdown');
      setTimeout(function () {
        container.addClass('country-select-dropdown');
      },1000);
    })

如果我延迟重新定位，则下拉列表不会自动关闭.

If i delay the repositioning the dropdown won't close automatically.

我当时正在考虑实现自定义下拉适配器，但是对于简单的重新定位任务而言，这似乎太复杂了！

I was thinking about implementing a custom dropdown adapter but that seems too complicated for a simple repositioning task!

有什么解决办法吗?

我也愿意使用其他库...我只需要一个自定义选择框...

Also I am opento using other libraries ... I just need a custom select box ...

$(document).ready(function() {
  $('.js-example-basic-single').select2({
    dropdownAutoWidth: true,
    minimumResultsForSearch: -1,
    dropdownCssClass: 'country-select-dropdown',
    dropdownParent: $('#slectParent').parent()
  });
});

#slectParent {
  position: reletive;
}

.country-select-dropdown {
  top: -2rem;
}

<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-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<div id="slectParent">
  <select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
  <div>

推荐答案

之所以发生这种情况，是因为该下拉列表也正获得click事件，因为该下拉列表正好在鼠标光标下方打开！

This happening because the dropdown is also getting the click event because the dropdown is opening exactly under the mouse cursor !

看来您是对的，但我不明白为什么.可能是因为Select2使用mousedown事件打开了下拉菜单，并使用click事件选择了选项(鼠标事件依次触发-mousedown-> mouseup-> click)

It seems you are right and I can't understand why. Probably because Select2 uses mousedown event to open dropdown and click event to select option (and mouse events fire in sequence - mousedown -> mouseup -> click)

这种情况似乎是我可以在这种情况下建议的最佳解决方案: https://codesandbox.io/s/compassionate-kepler-fzt4h?file=/src/index.js

Something like this seems to be the best solution I can propose in this situation: https://codesandbox.io/s/compassionate-kepler-fzt4h?file=/src/index.js

$(document).ready(function () {
  $(".js-example-basic-single")
    .select2({
      dropdownAutoWidth: true,
      minimumResultsForSearch: -1,
      dropdownCssClass: "country-select-dropdown",
      dropdownParent: $("#slectParent").parent()
    })
    .on("select2:open", function (e) {
      var container = $(".select2-container .select2-dropdown");
      setTimeout(function () {
        container.addClass("country-select-dropdown-open");
      }, 300);
    })
    .on("select2:closing", function (e) {
      var container = $(".select2-container .select2-dropdown");
      container.removeClass("country-select-dropdown-open");
    });
});

Css:

.country-select-dropdown {
  top: -2rem;
  pointer-events: none;
}

.country-select-dropdown-open {
  pointer-events: initial;
}

基本上，这是使用计时器的解决方案，但我不会延迟定位，而是禁用了鼠标事件，并在300ms之后启用了它们.不过，这并不是一个完美的解决方案，可能会让用户感到迟钝.也许您可以尝试将一些CSS动画添加到重新定位IDK中.

It's basically your solution with timer but instead of delaying positioning, I disable mouse events and enable them after 300ms. Still, not a perfect solution and might feel laggy for users. Maybe you can try to add some css animation to repositioning, idk.

不幸的是，我不能为香草JS建议任何Select2替代品.

Unfortunately, I can't suggest any Select2 alternatives for vanilla JS.

这篇关于Select2打开select的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！