select2 트러블 슈팅

Jquery의 플러그인 select2 가 정상 작동을 하지 않아 원인을 찾는데 많은 시간이 들었습니다.

다른분들은 시간낭비 하지 않기를 바라는 마음으로 내용을 기록합니다.

 

다른 개발자분이 작업한 곳에서는 이상없이 작동하는데 어째서인지 작동을 하지 않아서 커스텀이 된건 아닌지

이것 저것 만지다가 결국 옆 자리의 천사같은 개발자분에게 도움을 요청해 문제를 해결할 수 있었습니다.

 

원인은 플러그인 자체 버그였습니다.

내용은 "SELECT2 는 부트스트랩 모달 내에서 정상작동을 하지 않는다" 입니다.

 

해결 방안은 아래의 코드를 참고하시면 됩니다.

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    ...
    <select id="mySelect2">
        ...
    </select>
    ...
</div>

...

<script>
    $('#mySelect2').select2({
        dropdownParent: $('#myModal')
    });
</script>

 

해결방안은 다른 블로그 글을 통해서 해결했지만 찾아보니

공식문서로 보이는 사이트에도 trouble shooting으로 작성되어 있었습니다.

 

더 자세한 내용은 아래에서 확인하시면 됩니다.

 

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

Common problems | Select2 - The jQuery replacement for select boxes