Select2 在引导模式中不起作用

Posted

技术标签:

【中文标题】Select2 在引导模式中不起作用【英文标题】：Select2 not working inside bootstrap modal 【发布时间】：2014-01-17 02:55:55 【问题描述】：

我正在尝试在引导模式中使用select2，但它没有自动获得焦点，并且向下和向上箭头不适用于填充的列表。

当我把它放在模式弹出窗口之外时，同样的 select2 工作。

当我搜索时，我发现很多人都面临同样的问题并找到了这篇文章

Select2 doesn't work when embedded in a bootstrap modal

我实现了这两个解决方案

    从模式弹出窗口中删除了tabindex。 modal.js 文件中enforceFocus 函数的注释代码。

但它仍然无法正常工作！知道我还缺少什么吗？

编辑1

当 tabindex 从模态 div 中删除但不适用于 IE9 时，它适用于 firefox

编辑2

我发现删除tabindex 实际上并没有被IE9 识别，因为我仍然可以在 IE 中通过转义键隐藏弹出窗口，但在 Firefox 中则不行。

【问题讨论】：

【参考方案1】：

把它放在你的 JS 中的某个地方：

   //fix modal force focus
   $.fn.modal.Constructor.prototype.enforceFocus = function () 
      var that = this;
      $(document).on('focusin.modal', function (e) 
         if ($(e.target).hasClass('select2-input')) 
            return true;
         

         if (that.$element[0] !== e.target && !that.$element.has(e.target).length) 
            that.$element.focus();
         
      );
   ;

【讨论】：

【参考方案2】：

使用下面的代码。这将解决您的错误。

$('select').select2(
    dropdownParent: $('#my_amazing_modal')
);

【讨论】：

如果您将其用于多种模式，您可以使用dropdownParent: $(".modal-body , .modal-body1")【参考方案3】：

我变了：

<div class="modal fade bd-example-modal-lg"  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

到以下：

<div class="modal fade bd-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

即从元素中删除属性tabindex="-1"。

【讨论】：

这种方法有什么缺点吗？【参考方案4】：

试试这个

<div class="col-sm-8" id="select">
    <select type="text" class="form-control" id="helloselect" data- name="helloselect">
        <option>Hello</option>
        <option>Hola</option>
        <option>Hallo</option>
    </select>
</div>

和脚本

$("#helloselect").select2(dropdownParent: $("#select"));

【讨论】：

【参考方案5】：

我尝试为 select2 下拉选项设置 z-index，它对我有用。这是我所做的：

.select2-container.select2-container--default.select2-container--open  
  z-index: 5000;

【讨论】：

【参考方案6】：

我正在寻找它并遇到了这个：

为我工作，为所有 select2 准备好文档

 $('select:not(.normal)').each(function () 
            $(this).select2(
                dropdownParent: $(this).parent()
            );
        );

取自： https://github.com/select2/select2-bootstrap-theme/issues/41

【讨论】：

这行得通。我在主容器中添加了一个id，并使用了与答案相同的内容。 dropdownParent: $('#new_appended_container')【参考方案7】：

这会成功的，它对我有用

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

【讨论】：

【参考方案8】：

引导模式中的属性 tabindex='-1' 可防止模式外的任何元素被 Tab 键访问或聚焦。它对于仅在模式上限制选项卡很有用，可访问性。但是由 select2 创建的元素是文档的子元素。 您需要将 dropdownParent 设置为您的模态

$(document).ready(function() 

    $("select").select2(dropdownParent: $("#myModal"));

    $('[data-toggle=offcanvas]').click(function() 
      $('.row-offcanvas').toggleClass('active');
    );
  


);
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>JS Bin</title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>

</head>
<body>
  <a href="" data-target="#myModal" data-toggle="modal">Convert to popup</a>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true"><i class="fa fa-close"></i></span>
            <span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Bootsrap4 Modal Label</h4>
        </div>
        <div class="modal-body">
		  <div id="PopupWrapper">
            <select class="form-control">
              <option>red</option>
              <option>blue</option>
              <option>green</option>
              <option>orange</option>
              <option>yellow</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

jsbin example

meaning of tabindex=-1

【讨论】：

【参考方案9】：

亲爱的，无需使用 tabindex="-1" 简单的 CSS 解决方案。 我们开始：

.page-body .select2-drop z-index: 10052;
.select2-drop-mask z-index: 10052;

你就完成了。 :)

【讨论】：

【参考方案10】： 
$('#dropdownid').select2(
  dropdownParent: $('#modalid')
 );

上面的代码对我有用，试试这个。

【讨论】：

【参考方案11】： 
$('.select2-with-search').select2(
      placeholder: 'Choose one',
      searchInputPlaceholder: 'Search options',
   dropdownParent: $('.modal')
   );

我们这个 

<div class="modal fade" id="createModal" role="dialog" aria-hidden="true"  data-backdrop="">
   <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">

并使用此

【讨论】：

【参考方案12】：

这里的所有答案都不适合我，但这个很好：

  $('#modal-window').on('shown.bs.modal', function (e) 
    $("#select-box").select2(
      placeholder: "Select...",
      theme: "bootstrap",
      language: "en"
    );
  )

把它包起来

$(document).on('ready turbolinks:load', function() ...

如果你使用 turbolink。

【讨论】：

【参考方案13】：

只需使用数据属性设置： data-dropdown-parent="#bs-modal-id"

<select class="form-control" data-dropdown-parent="#bs-modal-id"></select>

【讨论】：

【参考方案14】：

找到问题了！

其实我是在按钮上使用 html 属性打开模式

 data-target="#modalAttachment"

虽然我应该使用 javascript 代码打开模式以使 enforceFocus 更改生效 当我开始使用它打开模式时，enforceFocus 函数改变了工作

$('#modalAttachment').modal('show');

谢谢！

【讨论】：

以上是关于Select2 在引导模式中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

为啥引导工具提示在引导模式中不起作用？

悬停在引导模式图像中不起作用

引导模式在 laravel 中不起作用

引导模式在下拉菜单中不起作用

Jquery位置选择器自动完成在引导模式中不起作用

引导模式内的日期选择器中的月份选择在 Firefox 中不起作用