Select2 在 Livewire 模态中加载时出现问题 - 需要帮助

Question

我正在使用 Laravel Livewire 创建带有表单的模态，但 select2 未在模态内正确加载。如果保存在模式之外 select2 可以正常运行。我搜索过相同的论坛主题，但没有找到解决方案。谁能帮我确定哪里出了问题？

<div wire:ignore.self class="modal fade" id="modalCreate" tabindex="-1" data-bs-backdrop="static"
    data-bs-keyboard="false" aria-labelledby="staticBackdropLabel" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center">
                <h4 class="modal-title" id="myLargeModalLabel">Add New Products</h4>
                <button class="btn-close" wire:click="closeModal()" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form wire:submit="storeProducts">

                    <!--  put the select2 here -->


                    <div class="modal-footer">
                        <button class="btn btn-sm btn-dark" wire:click="closeModal()" data-bs-dismiss="modal"
                            type="button">Cancel</button>
                        <button type="submit" class="btn btn-sm btn-primary">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div wire:ignore>
    <label for="taskSelect" class="form-label">Select Tasks</label>
    <select class="form-control form-select" id="taskSelect" multiple="multiple" wire:model.live="selectedTasks">
        <option id="asd"> asd </option>
        <option id="dfg"> dfg </option>
        <option id="hgh"> hgh </option>
    </select>
    <script>
        $(document).ready(function () {
            $('#taskSelect').select2();
        });
    </script>
</div>

Answer 1

window.addEventListener('show-modal-create', event => {
        $('#modalCreate').modal('show');
        $('#taskSelect').select2({
            dropdownParent: $('#modalCreate')
        });
    });