Select2 下拉菜单在 Bootstrap 弹出窗口中无法正常工作答案

【问题标题】：Select2 dropdown is not working properly in Bootstrap popoverSelect2 下拉菜单在 Bootstrap 弹出窗口中无法正常工作
【发布时间】：2020-05-21 08:48:20
【问题描述】：

我正在尝试将 select2 下拉菜单放置在我的弹出窗口中 - 当我第一次打开弹出窗口时，select2 下拉菜单会正常呈现，但如果我关闭它并再次打开 - 它会呈现 2 个 select2 下拉菜单，其中一个是不可点击的：

我已经尝试过来自here 的z-index 解决方案和来自here 的解决方案，但它们不起作用。我还读到 select2 在 Bootstrap 模态中无法正常工作，并且还尝试使用 dropdownParent 属性渲染它 - 也没有用。

我的 HTML：

<div class="actions-row mb-5">
   <button type="button" class="btn popover-toggle add-to-program-popover" data-placement="bottom">
   Add to program
   </button>
   <div class="program-container" style="display: none">
      <select name="movement-program-select" class="movement-program-select">
         <option value=""></option>
         <option value="Program 1">Program 1</option>
         <option value="Program 2">Program 2</option>
         <option value="Program 3">Program 3</option>
      </select>
      <i class="fa fa-floppy-o add-to-program" aria-hidden="true"></i>
      <hr>
      <a class="create-new-program">
      <i class="fa fa-plus-square-o add-item"></i>
      Create new program</a>
   </div>
</div>

这是我的 JS 代码：

 $('button.add-movement-to-program').on('click', function(e) {
   $('.add-to-program-table-container').show();
 });

 $('button.add-to-program-popover').popover({
   container: 'main',
   html: true,
   content: function() {
     return $('.program-container').html();
   }
 });

 $('button.add-to-program-popover').click(function() {
  // console.log(1);
  // if (!$('.movement-program-select').hasClass("select2-hidden-accessible")) {
  // console.log(2);
  $('.movement-program-select').select2({
    container: 'body',
    width: "100%",
    dropdownParent: $('.popover-content')
  });
  // }
});

关于如何修复它还有其他变体吗？

这是我的 JSFiddle 的链接：http://jsfiddle.net/fpk047rh/1/

【问题讨论】：

标签： javascript twitter-bootstrap bootstrap-4 dropdown html-select

【解决方案1】：

您想使用show event 来定位弹出框内的select 元素。

这是一个例子

HTML：

<div id="wrapper">
  <button type="button" id="myButton" class="btn btn-lg">Click to toggle popover</button>
  <div id="form" style="display:none;">
    <select class="select-program" name="program">
      <option value=""></option>
      <option value="Program 1">Program 1</option>
      <option value="Program 2">Program 2</option>
      <option value="Program 3">Program 3</option>
    </select>
    <div class="add-program"></div>
  </div>
</div>

JavaScript

$(function () {
  $("#myButton").popover({
    html: true,
    content: $("#form").html(),
    placement: "bottom"
  });

  $("#myButton").on("show.bs.popover", function () {
    setTimeout(() => {
      $(".popover-content .select-program")
        .select2({
          dropdownParent: $(".popover-content")
        })
        .on("select2:select", function (e) {
          var data = e.params.data;
          $(".popover-content .add-program").html("Add " + data.text);
        });
    }, 0);
  });
});

更多信息可以在here找到。

CodePen

【讨论】：

【解决方案2】：

我已经用inserted.bs.popover 事件修复了它：

$('button.add-to-program-popover').popover({
  container: 'body',
  html: true,
  content: function() {
    return $('.program-container').html();
  }
});

$('button.add-to-program-popover').on('inserted.bs.popover', function () {
  $('div.popover-content select').select2({
    dropdownParent: $('.popover-content')
  });
});

另外，我正在转换为 select2 下拉列表的选择框是弹出容器内的选择框 ($('div.popover-content select'))

【讨论】：