嵌入在引导模式中时，Select2不起作用

Question

当我在bootstrap模式中使用select2（输入）时，我无法在其中键入任何内容。这就像残疾人？莫代尔选择2之外的工作正常。

工作示例：http://jsfiddle.net/byJy8/1/ 代码：

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">


<form class="form-horizontal">

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="vdn_number">Numer</label>
  <div class="controls">
     <!-- seleect2 -->
    <input name="vdn_number" type="hidden" id="vdn_number"  class="input-large" required=""  />
  </div>
</div>

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

adn js

$("#vdn_number").select2({
    placeholder: "00000",
    minimumInputLength: 2,
    ajax: {
        url: "getAjaxData/",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
            return {
                q: term, // search term
                col: 'vdn'
            };
        },
        results: function (data) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        }
    }
});

答案：

在这里，您可以快速找到fix

这是'正确的方法'：Select2 doesn't work when embedded in a bootstrap modal

Answer 1

好的，我已经开始工作了。

变化

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

到

<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

（从模态中移除 tabindex =“ - 1”）

Answer 2

我在github上为select2找到了解决方案

https://github.com/ivaynberg/select2/issues/1436

对于bootstrap 3，解决方案是：

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4将enforceFocus方法重命名为_enforceFocus，因此您需要修改它：

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

从上面链接复制的说明：

  

Bootstrap向focusin事件注册一个监听器，该事件检查聚焦元素是覆盖本身还是覆盖本身的后代 - 如果不是，它只是重叠在覆盖上。将select2下拉列表附加到正文后，这有效地阻止您在文本字段中输入任何内容。

     

您可以通过覆盖在模态

上注册事件的enforceFocus函数来快速修复此问题

Answer 3

只需删除tabindex="-1"并添加样式overflow:hidden

即可

以下是一个例子：

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

Answer 4

.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

这是我使用select2 4.0.0的解决方案。只需覆盖select2.css导入正下方的css即可。 请确保z-index大于对话框或模态。我只是在默认值上添加2000。因为我的对话框'z-index大约是1000。

Answer 5

设置dropdownParent。我必须将其设置为模态内的.modal-content，否则文本最终会居中。

$("#product_id").select2({
    dropdownParent: $('#myModal .modal-content')
});

Answer 6

我遇到了同样的问题，为z-index更新.select2-container应该可以解决问题。确保您的模态z-index低于select2＆＃39>。

.select2-container {
    z-index: 99999;
}

更新： 如果上面的代码没有正常工作，也可以从你的模态中删除tabindex，如@breq建议

Answer 7

Jus在Document.read（）

上使用此代码

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

Answer 8

在我这里找到的答案：https://github.com/select2/select2-bootstrap-theme/issues/41

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

也不需要删除tabindex。

Answer 9

更改 select2.css 文件

z-index: 9998;
...
z-index: 9999;
...
z-index: 10000;

到

z-index: 10000;
...
z-index: 10001;
...
z-index: 10002;

Answer 10

更好地了解tabindex元素如何工作以完成已接受的答案：

  

tabindex全局属性是一个整数，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则在哪个位置。它可能需要几个值：
   - 负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航到达;   
  -0表示该元素应该可通过顺序键盘导航进行可聚焦和可达，但其相对顺序由平台约定定义;   
   - 正值意味着应该可通过顺序键盘导航进行聚焦和可达;其相对顺序由属性值定义：顺序跟随tabindex的增加数量。如果多个元素共享相同的tabindex，则它们的相对顺序遵循它们在文档中的相对位置。

来自：Mozilla Devlopper Network

Answer 11

此问题使我无法使用单个Jquery函数

$('#myModal .select2').each(function() {  
   var $p = $(this).parent(); 
   $(this).select2({  
     dropdownParent: $p  
   });  
});

Answer 12

根据@pymarco的回答，我写了这个解决方案，它并不完美，但解决了select2焦点问题，并维护了模态中的标签序列

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        $(document)
        .off('focusin.bs.modal') // guard against infinite focus loop
        .on('focusin.bs.modal', $.proxy(function (e) {
            if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('.select2-dropdown').length) {
                this.$element.trigger('focus')
            }
        }, this))
    }

Answer 13

如果 iPad 键盘出现问题隐藏 引导模式，同时点击 select2 输入，您可以通过在select2输入初始化之后添加以下规则来解决此问题：

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
   var styleEl = document.createElement('style'), styleSheet;
   document.head.appendChild(styleEl);
   styleSheet = styleEl.sheet;
   styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
   document.body.scrollTop = 0; // Only for Safari
}

取自https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

编辑：如果您的选项显示不正确，则在初始化dropdownParent时需要使用select2属性：

$(".select2").select2({
    dropdownParent: $("#YOURMODALID")
});

祝你好运（：

Answer 14

根据select2官方文档，发生此问题是因为Bootstrap模态倾向于从模态之外的其他元素中窃取焦点。

默认情况下，Select2将下拉菜单附加到元素，并且将其视为“模态之外”。

相反，使用dropdownParent设置将下拉列表附加到模式本身：

$('#myModal').select2({
   dropdownParent: $('#myModal')
});

请参阅参考资料：https://select2.org/troubleshooting/common-problems

Answer 15

好的，我知道我迟到了。但是，让我与您分享对我有用的东西。 tabindex和z-index解决方案对我不起作用。

按照select2网站上列出的common problems设置select元素的父元素。

Answer 16

$("#IlceId").select2({
    allowClear: true,
    multiple: false,
    dropdownParent: $("#IlceId").parent(),
    escapeMarkup: function (m) {
        return m;
    },
});

此代码正常运行。谢谢。

Answer 17

我在项目中通常通过重载select2函数来解决此问题。现在，它将检查是否没有dropdownParent，以及是否在具有类型div.modal的父元素的元素上调用该函数。如果是这样，它将添加该模式作为下拉列表的父级。

这样，您不必在每次创建select2-input-box时都指定它。

(function(){
    var oldSelect2 = jQuery.fn.select2;
    jQuery.fn.select2 = function() {
        const modalParent = jQuery(this).parents('div.modal').first();
        if (arguments.length === 0 && modalParent.length > 0) {
            arguments = [{dropdownParent: modalParent}];
        } else if (arguments.length === 1
                    && typeof arguments[0] === 'object'
                    && typeof arguments[0].dropdownParent === 'undefined'
                    && modalParent.length > 0) {
            arguments[0].dropdownParent = modalParent;
        }
        return oldSelect2.apply(this,arguments);
    };
})();

Answer 18

之前我遇到过这个问题，我正在使用yii2而且我用这种方式解决了这个问题

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

Answer 19

我对select2中的bootstrap modal存在同样的问题，解决方案是删除overflow-y: auto;和overflow: hidden;来自.modal-open和.modal classes

以下是使用jQuery删除overflow-y：

的示例

$('.modal').css('overflow-y','visible');
$('.modal').css('overflow','visible');

Answer 20

如果使用jquery mobile popup，则必须重写_handleDocumentFocusIn函数：

$.mobile.popup.prototype._handleDocumentFocusIn = function(e) {
  if ($(e.target).closest('.select2-dropdown').length) return true;
}

Answer 21

在我的情况下，我在两个模式上遇到了相同的问题，并且使用以下方法解决了所有问题：

$('.select2').each(function() { 
    $(this).select2({ dropdownParent: $(this).parent()});
})

用户在项目问题#41中表示。

Answer 22

您可以在$（document）内部再次调用select2触发器

$(".select2").select2({ 
                width: '120' 
            });

Answer 23

要将bootstrap 4.0与服务器端（内联ajax或json数据）一起使用，您需要添加所有这些内容：

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

，然后在打开模态时，创建select2：

  // when modal is open
  $('.modal').on('shown.bs.modal', function () {
            $('select').select2({
                  // ....
            });
  });

Answer 24

从模态中删除 tabindex="-1"。我检查了这个解决方案，它奏效了。

参考：https://github.com/select2/select2-bootstrap-theme/issues/41

Answer 25

如果您使用stisla并使用firemodal：

$('#modal-create-promo').click(()=>{
    setTimeout(()=>{
        $('#fire-modal-1').removeAttr('tabindex');
    });
});

    $("#modal-create-promo").fireModal({
    ...
});

这对我有用

Answer 26

这个问题我待了将近2-3天，但是最后，我意识到必须重点关注才能使用搜索功能，因此我从模式中删除了tabindex="-1"，因为它阻止了焦点。现在一切正常。

Answer 27

我遇到了同样的问题，无法关注模式中select2的文本框。删除tabindex =“-1”后，它已修复。

因此，select2不适用于带有tabindex =“-1”的引导模式。因此，最好删除tabindex =“-1”并将其修复。

Answer 28

我遇到了类似的问题，并且解决了

    $('#CompId').select2({
              dropdownParent: $('#AssetsModal')
    });

和选择模态

    <div class="modal fade" id="AssetsModal" role="dialog" 
    aria-labelledby="exampleModalCenterTitle" 
    aria-hidden="true"  style="overflow:hidden;" >
<div class="modal-dialog modal-dialog-centered" role="document">
  <div class="modal-content">
      <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle" >Добави активи</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
          <form role="form" action="?action=dma_act_documents_assets_insert&Id=<?=$ID?>" 
                  method="post" name="dma_act_documents_assets_insert" 
                  id="dma_act_documents_assets_insert">
            <div class="form-group col-sm-12">
                  <label for="recipient-name" class="col-form-label">Актив:</label>
                  <span style="color: red">*</span>
                          <select class="form-control js-example-basic-single col-sm-12" 
                                 name="CompId" id="CompId">
                                  <option></option>
                          </select>
              </div>
          </form>
      </div>
  </div>
</div>

但是我不知道为什么选择菜单比其他字段小

，它开始像使用select2时那样开始。当我删除它时，一切正常。

有没有人可以分享一些经验。

谢谢。

Answer 29

$('.modal').on('shown.bs.modal', function (e) {
    $(this).find('.select2me').select2({
        dropdownParent: $(this).find('.modal-content')
    });
})

Answer 30

我在应用程序中遇到一个半相关的问题，所以我将其放在2c中。

我有多个模态，它们的形式包含select2小部件。打开模式A，然后打开模式A内的另一个模式，将导致模式B内的select2小部件消失并且无法初始化。

每个模态都是通过ajax加载表格的。

解决方案是在关闭模式时从dom中删除表单。

contacts2 <- merge(contacts, all_cards[, c("id", "idList", "idLabels")], by = "id")

Answer 31

我只需加入 select2.min.css

尝试出来

我的引导程序3的模式html是

<div id="changeTransportUserRequestPopup" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 40%!important; ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Warning</h3>
            </div>
            <div class="modal-body" id="changeTransportUserRequestPopupBody">
                <select id="cbTransport" class="js-example-basic-single" name="cbTransport" style="width:100%!important;"></select>
            </div>
            <div class="modal-footer">
                <button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">Cancel</button>
                <button type="submit" id="yesChangeTransportPost" class="btn btn-success" name="yesChangeTransportPost" value="true" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div>

Answer 32

就我而言，我做到了，而且行得通。我使用捆绑软件加载它，在这种情况下，它对我有用

 $(document).on('select2:select', '#Id_Producto', function (evt) {
   // Here your code...
  });