[javascript/select2] bootstrap modal에서 select2 문제해결

select box 검색 플러그인인 select2를 bootstrap modal에서 사용하면 

제대로 동작을 하지 않는 경우가 있다.

 

스타일을 따라가 보면 z-index도 제대로 설정되지 않고 좌표도 엉켜있다.

 

가끔 해결방법이라고 단순히 CSS로 z-index를 높여서 해결하라는 답변이 있는데 그렇게 되면

좌표가 틀어지는 현상이 발생할 여지가 있다.

 

해결방법은 select 부모를 모달로 지정해주면 해결된다.

 

<div class="modal fade" id="exampleModal" tabindex="-1" 
aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static">
 ...
    <select class="form-select" id="exampleSelect2">
      <optgroup label="fruit">
        <option>Apple</option>
        <option>Watermelon</option>
      </optgroup>
      <optgroup label="Vegetable">
        <option>Onion</option>
        <option>Celery</option>
      </optgroup>
    </select>
  ...
</div>

예를 들어 모달 위에 exampleSelect2이라는 select2를 exampleModal에 선언하였다면,

 

스크립트에서 select2 초기화 해줄때

$(document).ready(function(){
	  $('#exampleSelect2').select2({
	    dropdownParent: $('#exampleModal')    
    });
})

위와 같이 dropdownParent 를 모달 엘리먼트로 지정해주면 해결된다.

 

코드는 다음에서 확인 가능하다.

https://jsfiddle.net/moojin/qvo9n8p7/26/

[select2] modal parent - JSFiddle - Code Playground