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

Question

当我在引导模式中使用 select2（输入）时，我无法在其中输入任何内容。 好像是残疾人？ 在模态 select2 之外工作正常。

工作示例： 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>
      </form>    
    </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>

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};
        }
    }
});

答案：

在这里你可以找到一个快速修复

这是“正确的方法”： Select2 在嵌入引导模式时不起作用

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

对于 Select2 v4：

使用dropdownParent将下拉dropdownParent附加到模式对话框，而不是 HTML 正文。

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select id="select2insidemodal" multiple="multiple">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script>

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

</script>

这将附加 Select2 下拉列表，使其位于模态的 DOM 内，而不是 HTML 正文（默认）。 见https://select2.org/dropdown#dropdown-placement

Answer 3

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

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

对于引导程序 3，解决方案是：

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

Bootstrap 4 将enforceFocus方法重命名为_enforceFocus ，因此您需要对其进行修补：

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

从上面的链接复制的解释：

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

您可以通过覆盖在模态上注册事件的enforceFocus 函数来快速解决此问题

Answer 4

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

下面是一个例子：

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

Answer 5

.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 6

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

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

Answer 7

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

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

也不需要删除tabindex 。

Answer 8

我有同样的问题，更新.select2-container z-index应该可以解决问题。 确保您的模态的z-index低于 select2。

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

更新：如果上面的代码不能正常工作，也可以按照@breq 的建议从你的模态中删除 tabindexes

Answer 9

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

默认情况下 Select2 将下拉菜单附加到元素，它被认为是“在模态之外”。

而是使用 dropdownParent 设置将下拉菜单附加到模态本身：

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

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

Answer 10

这个问题很困扰我 单个 Jquery 函数

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

Answer 11

对于 bootstrap3 版本，只需在文档就绪时使用此代码：

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

Answer 12

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

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

正如用户所说的项目问题#41 一样。

Answer 13

更改select2.css文件

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

到

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

Answer 14

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

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

来自： Mozilla 开发者网络

Answer 15

如果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

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

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

祝你好运 （：

Answer 16

基于@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 17

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

此代码正在工作。 谢谢你。

Answer 18

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

设置 select 元素的父元素按照 select2 站点上列出的常见问题工作。

Answer 19

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

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

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

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

Answer 20

如果您使用 jquery 移动弹出窗口，则必须重写 _handleDocumentFocusIn 函数：

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

Answer 21

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

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

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

Answer 22

我以前遇到过这个问题，我正在使用 yii2，我是这样解决的

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

Answer 23

我通过重载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);
    };
    // Copy all properties of the old function to the new
    for (var key in oldSelect2) {
        jQuery.fn.select2[key] = oldSelect2[key];
    }
})();

Answer 24

我在一个应用程序中有一个半相关的问题，所以我会输入我的 2c。

我有多个带有包含 select2 小部件的表单的模态。 打开模态 A，然后在模态 A 中打开另一个模态，将导致模态 B 中的 select2 小部件消失并且无法初始化。

这些模式中的每一个都通过 ajax 加载表单。

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

$(document).on('hidden.bs.modal', '.modal', function(e) {
    // make sure we don't leave any select2 widgets around 
    $(this).find('.my-form').remove();
});

Answer 25

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

Answer 26

您可以在 $(document) 中再次调用 select2 触发器

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

Answer 27

我有一个类似的问题，我用

    $('#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 28

像这样在Bootstrap Modal中使用Select2 Bootstrap 5 Theme ：

1. 修复select2 & bootstrap模态搜索输入错误。
2. 修复select 选项后的select2 & bootstrap模态滚动错误。

 jQuery(function() { $('.my-select2').each(function() { $(this).select2({ theme: "bootstrap-5", dropdownParent: $(this).parent(), // fix select2 search input focus bug }) }) // fix select2 bootstrap modal scroll bug $(document).on('select2:close', '.my-select2', function(e) { var evt = "scroll.select2" $(e.target).parents().off(evt) $(window).off(evt) }) })

 <:DOCTYPE html> <html> <head> <.-- Styles --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap:min.css" /> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2:min.css" /> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.2.0/dist/select2-bootstrap-5-theme:min.css" /> <.-- Scripts --> <script src="https.//cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery:slim.min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap:bundle.min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Select2 v4.1 <select class="my-select2"> <option>Test 1</option> <option>Test 2</option> <option>Test 3</option> <option>Test 4</option> <option>Test 5</option> <option>Test 6</option> <option>Test 7</option> <option>Test 8</option> <option>Test 9</option> <option>Test 10</option> </select> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html>

Answer 29

我只是通过包含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 30

如果您使用stisla并使用 firemodal ：

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

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

这对我有用

Answer 31

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

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

Answer 32

这对所有人都有效

body .select2-container {
    z-index: 9999 !important;
}

Answer 33

在您的页面上使用此代码

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

    $("#myModal").on('change', '#vdn_number', function () {
        var term = $(this).val();
        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 };
            }
        });
    });
});

我想这会帮助你

Answer 34

您不应该按照大多数答案中的建议将下拉菜单固定在模式上。 如果您的 select2 位于模态框的底部，并且您需要向下滚动才能找到它，那么您将遇到下拉菜单的位置问题，因为您将其卡在了模态框上。

相反，您应该将下拉父级设置为输入父级。 在您的情况下，它应该看起来像这样

$(document).ready(function() {
  $("#vdn_number").select2({
    dropdownParent: $("#vdn_number").parent()
  });
});

Answer 35

当我在引导模式中使用select2（输入）时，无法在其中输入任何内容。 就像残疾吗？ 在模态外部select2可以正常工作。

工作示例： 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>

和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};
        }
    }
});

答案：

在这里您可以找到快速修复

这是“正确的方法”： 嵌入到引导模式中时，Select2不起作用