select2가 모달로 작동하지 않습니다.

Question

모달 내에서 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 --> 

자바 스크립트 :

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

);

CSS는 : 나는 select2-4.0.3을 사용하고

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

. 나는이 문제를 고칠뿐만 아니라 내 코드에서 무엇이 잘못되었는지 모른다. 어떤 도움이라도 대단히 감사하겠습니다. 미리 감사드립니다!

Answer 1

dropdownParent를 사용하는 것은 길입니다. 부트 스트랩 대화 상자에서 select2를 사용합니다. 하지만 코드에서 대화 시스템에 어떤 CSS 속성이 있는지 분명합니다. 부트 스트랩 또는 다른 것입니까?

어쨌든 position:fixed 인 요소를 dropdownParent 옵션에 지정해야합니다. (? 선택 2의 버전이 사용합니까 무엇) 나를 위해 그것은 꽤 아니라 적어도 V4에,

Answer 2

을 작동하지만 일을해야합니다

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

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

Answer 3

는 자바 스크립트 파일에 다음 코드를 추가합니다 :

를

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

Answer 4

이 작품은 나를 위해!

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