Выберите 2 v4.0.5 не работает в моде начальной загрузки 4

Question

Я проверил большинство проблем, связанных с select2, в отношении загрузочного модала, однако, ни один из них не работает.

Мой модал выглядит так:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-body">
        <form class="form">
             <div class="row">
                <div class="col-sm-4">
                    <select id="mySelect2">

                    </select>
                </div>
            </div>
        </form>
    </div>
</div>

И вот немногопытается инициализировать select2

1

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

2

<script>
    $('#mySelect2').select2({
        dropdownParent: $('#myModal .modal-body'),
        tags: true
    });
</script>

3

с добавлением дополнительной строки как в 1, так и в 2

<script>
    $.fn.modal.Constructor.prototype.enforceFocus = function() {};
    $('#mySelect2').select2({
        dropdownParent: $('#myModal .modal-body'),
        tags: true
    });
</script>

4

Удалено tabindex="-1" и пробовал все шаги от 1-3

Все, я пытаюсь инициализировать select2 с динамическим созданием опции.

Нет, этот метод работает. Может ли кто-нибудь указать мне, что мне не хватает: (

Answer 1

Что ж, глядя на ваши попытки, похоже, это должно было сработать. Однако иногда случается так, что ваш модал еще не загружен, однако, select2 уже инициализирован. В этих случаях было бы лучше инициализировать этот выбор на shown.bs.modal. Я чувствую, что это должно быть проблемой и с вашим делом. В противном случае ваши попытки должны были сработать.

Следующий код должен выполнить эту работу, если это так:

        $('#myModal').on('shown.bs.modal', function (e) {
            $(this).find('#mySelect').select2({
                dropdownParent: $(this).find('.modal-body'),
                tags: true
            });
        });