Laravel Livewire模态框内Select2加载异常求助

核心问题 #

1. 模态框默认处于隐藏状态，$(document).ready()执行时，模态框内的<select>元素未被渲染到可见DOM中，Select2无法对不可见元素完成初始化。
2. Livewire的DOM更新机制会重置未标记wire:ignore的元素，导致Select2实例被破坏。

修复步骤 #

1. 在模态框内添加带wire:ignore的Select2容器 #

将Select2的<select>移入模态框，并用wire:ignore包裹容器，避免Livewire修改该元素的DOM结构：

<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">
                    <!-- 模态框内的Select2 -->
                    <div wire:ignore class="mb-3">
                        <label for="taskSelectModal" class="form-label">Select Tasks</label>
                        <select class="form-control form-select" id="taskSelectModal" multiple="multiple" wire:model.live="selectedTasks">
                            <option value="asd">asd</option>
                            <option value="dfg">dfg</option>
                            <option value="hgh">hgh</option>
                        </select>
                    </div>

                    <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>

2. 监听模态框显示事件，延迟初始化Select2 #

放弃$(document).ready()，改为监听Bootstrap模态框的shown.bs.modal事件，在模态框完全显示后初始化Select2，同时处理选择值与Livewire模型的同步：

<script>
// 模态框显示后初始化Select2
$('#modalCreate').on('shown.bs.modal', function () {
    $('#taskSelectModal').select2({
        placeholder: "选择任务",
        allowClear: true
    });

    // 同步Select2选择到Livewire的绑定属性
    $('#taskSelectModal').on('change', function () {
        @this.set('selectedTasks', $(this).val());
    });
});

// 模态框关闭时销毁Select2实例，避免重复初始化
$('#modalCreate').on('hidden.bs.modal', function () {
    $('#taskSelectModal').select2('destroy');
});
</script>

关键注意点 #

• 确保<option>设置正确的value属性，Livewire的wire:model绑定的是value而非元素id。
• 必须用wire:ignore包裹Select2容器，防止Livewire重新渲染时重置该元素。
• 关闭模态框时销毁Select2实例，避免下次打开时出现重复初始化的异常。

内容的提问来源于stack exchange，提问作者Faizal Anwar