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

Question

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

我已经尝试过z-index中的here解决方案和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/

我正在尝试将select2下拉列表放到我的弹出窗口中-第一次打开popover时select2下拉窗口正常呈现，但是如果我关闭它并再次打开-它会呈现2个select2下拉列表，...

Answer 1

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