嵌入在引导模式中时,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};
        }
    }
});

答案:

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

这里是'正确的方法':当嵌入在引导程序模式中时,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该下拉列表连接到模态对话框,而不是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

对于bootstrap 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

我有一个类似的问题，我修复了

\n

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

\n

和模态选择

\n

    <div class="modal fade" id="AssetsModal" role="dialog" \n    aria-labelledby="exampleModalCenterTitle" \n    aria-hidden="true"  style="overflow:hidden;" >\n<div class="modal-dialog modal-dialog-centered" role="document">\n  <div class="modal-content">\n      <div class="modal-header">\n            <h5 class="modal-title" id="exampleModalLongTitle" >\xd0\x94\xd0\xbe\xd0\xb1\xd0\xb0\xd0\xb2\xd0\xb8 \xd0\xb0\xd0\xba\xd1\x82\xd0\xb8\xd0\xb2\xd0\xb8</h5>\n            <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n              <span aria-hidden="true">&times;</span>\n            </button>\n      </div>\n      <div class="modal-body">\n          <form role="form" action="?action=dma_act_documents_assets_insert&Id=<?=$ID?>" \n                  method="post" name="dma_act_documents_assets_insert" \n                  id="dma_act_documents_assets_insert">\n            <div class="form-group col-sm-12">\n                  <label for="recipient-name" class="col-form-label">\xd0\x90\xd0\xba\xd1\x82\xd0\xb8\xd0\xb2:</label>\n                  <span style="color: red">*</span>\n                          <select class="form-control js-example-basic-single col-sm-12" \n                                 name="CompId" id="CompId">\n                                  <option></option>\n                          </select>\n              </div>\n          </form>\n      </div>\n  </div>\n</div>\n

\n\n

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

\n

当开始使用 select2 时就这样开始。当我删除它时，一切都正常。

\n

有没有人可以分享一些这方面的经验。

\n

谢谢。

\n

Answer 9

我有同样的问题,更新z-index了.select2-container应该做的伎俩.确保你的模态z-index低于select2的模态.

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

更新:如果上面的代码无法正常工作,也可以从@breq建议的模式中删除tabindexes

Answer 10

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

Answer 11

According to the official select2 documentation this issue occurs because Bootstrap modals tend to steal focus from other elements outside of the modal.

By default Select2 attaches the dropdown menu to the element and it is considered "outside of the modal".

Instead attach the dropdown to the modal itself with the dropdownParent setting:

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

See reference: https://select2.org/troubleshooting/common-problems

Answer 12

Jus在Document.read()上使用此代码

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

Answer 13

此问题适合我的单个Jquery函数

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

Answer 14

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

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

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

Answer 15

要将 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 16

更改select2.css文件

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

至

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

Answer 17

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

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

来自:Mozilla Devlopper Network