select2不适用于模态

我正在处理模式中的select2。几周前我正在研究它。我已阅读了一些帖子，但没有任何解决方案适用于我。例如：select2不适用于模态

Select2 doesn't work when embedded in a bootstrap modal

Select2 not working inside bootstrap modal

的代码是：

<div id="modal_sg" class="modal fade" style="overflow: hidden;"> 
<div class="modal-dialog"> 
    <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">Please select a corporation</h4> 
     </div> 
     <div class="modal-body"> 
      <form id="form_ag" class="form form-horizontal"> 
       <input type="hidden" style="display:none;" value="32" name="id"> 
       <div class="form-group"> 
        <label for="id_sg" class="control-label col-md-3">Corporation</label> 
        <div class="col-md-9"> 
         <select class="form-control select2" id="id_sg" name="id_sg"> 
          <option value="89">a</option> 
          <option value="115">b</option> 
          <option value="84">c</option> 
         </select> 
        </div> 
       </div> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
      <button type="button" class="btn btn-primary" id="bt_modal_sg">Save</button> 
     </div> 
    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog -->

的Javascript：

$('.select2').select2(
    {dropdownParent: $('#modal_sg')}

）;

的CSS：

.select2-container { 
width: 100% !important; 
padding: 0; 
}

我使用select2-4.0.3。我不知道该怎么解决这个问题，也不知道我的代码有什么问题。任何帮助将非常感激。提前致谢！

来源

2016-07-24 plectranthus

你的问题到底是什么？ “不工作”还不清楚。 – Shrike

select2可以很好地工作，除非在模态中。当我点击下拉菜单时，它会更改展开/折叠符号，但我看不到任何下拉列表。我已经测试了我找到的所有解决方案，但没有一个适合我。我确信我的代码有问题，但我找不到它！ – plectranthus

使用dropdownParent是要走的路。我在Bootstrap对话框中成功使用了select2。但是从你的代码中可以清楚你对话系统有哪些CSS属性。是Bootstrap还是别的？

无论如何，您需要在dropdownParent选项中指定position:fixed的元素。它应该工作，至少在V4

来源

2016-08-04 10:04:36 Shrike

这不是很漂亮，但为我工作（选择2的版本，你用什么？）：

.select-in-modal+.select2-container { 
    width: 100% !important; 
    padding: 0; 
    z-index:10000; 
} 

.select2-container--open { 
    z-index:10000; 
}

来源

2016-12-03 13:32:22

-1

下面的代码添加到JavaScript文件：

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

来源

2017-11-09 11:41:59 Haben

请阅读[我如何写出一个好答案]（https://stackoverflow.com/help/how-to-answer） – Dwhitz

这适用于我！

$('select').select2({ 
    width: '100%' 
});

来源

2018-02-08 10:48:42 Ngaiza

select2不适用于模态

回答

相关问题