时间戳

首页 > 解决方案 > Select2 下拉菜单在 Bootstrap 弹出窗口中无法正常工作

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

问题描述

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

2 选择 2 下拉菜单

我已经尝试过这里z-index的解决方案和这里的解决方案，但它们没有用。我还读到 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/

标签： javascripttwitter-bootstrapbootstrap-4dropdownhtml-select

解决方案

您想使用show 事件来定位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);
  });
});

更多信息可以在这里找到。

代码笔

推荐阅读