Bootstrap 4.6.0模态框Tab中Select2组件失效问题求助

我是Bootstrap 4新手，遇到一个Select2组件的问题：两个Select2单独使用都正常，但放到模态框的tab-content（通过@include引入）后，出现异常：

• 当peralatan的tab-pane在tindakan上方时，Select2正常工作
• 把peralatan的tab-pane移到tindakan下方时，该Tab内的Select2占位符不显示，无法正常使用

怀疑问题出在tab-content或Bootstrap模态框本身，相关代码如下：

不同Tab顺序的代码示例 #

情况1：peralatan在tindakan上方时 #

<div class="tab-content p-7 pe-3" id="tab-layanan">
    {{-- Peralatan --}}
    <div class="tab-pane fade" id="peralatan" role="tabpanel">
        @include(
            'pasien.tindakan_peralatan._modal_tambah_peralatan'
        )
    </div>
    {{-- Tindakan --}}
    <div class="tab-pane fade show active" id="tindakan" role="tabpanel">
        @include(
            'pasien.tindakan_peralatan._modal_tambah_tindakan'
        )
    </div>
</div>

情况2：peralatan在tindakan下方时 #

<div class="tab-content p-7 pe-3" id="tab-layanan">
    {{-- Tindakan --}}
    <div class="tab-pane fade show active" id="tindakan" role="tabpanel">
        @include(
            'pasien.tindakan_peralatan._modal_tambah_tindakan'
        )
    </div>
    {{-- Peralatan --}}
    <div class="tab-pane fade" id="peralatan" role="tabpanel">
        @include(
            'pasien.tindakan_peralatan._modal_tambah_peralatan'
        )
    </div>
</div>

控制Tab显示/隐藏的JS代码 #

<script>
    if($('#tipe-data').val() === 'Peralatan'){
        $("#tab_tdk").addClass('active')
        $("#tab_alat").removeClass('active')
        $("#tindakan").addClass('show active')
        $("#peralatan").removeClass('show active')
    
    }else{
        $("#tab_tdk").removeClass('active')
        $("#tab_alat").addClass('active')
        $("#tindakan").removeClass('show active')
        $("#peralatan").addClass('show active')
    }   
</script>

Select2初始化代码（位于@include的文件中） #

$(document).each(function(){
        $('#input-search-peralatan-pasien').select2({
            placeholder: 'Cari Peralatan',
            dropdownParent:  $('#input-search-peralatan-pasien').parent('#modal_tambah_tdk_alat_pasien'),,
            ajax: {
                    ...}
             ...
}

完整模态框代码 #

<div class="modal fade"  style="overflow:hidden;" id="modal_tambah_tdk_alat_pasien" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{__('Tambah Data Tindakan Medis & Peralatan')}}</h5>

                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <span class="fa fa-times"></span>
                </div>
            </div>

            <div class="modal-body p-0">

                <div class="card">
                    <div class="card-body">

                        <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x nav-stretch fs-6 border-2 px-7 pt-3">
                            <li class="nav-item">
                                <a class="nav-link active" id="tab_tdk" data-bs-toggle="tab" href="#tindak">{{__('Tindakan')}}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="tab_alat" data-bs-toggle="tab" href="#peralat">{{__('Peralatan')}}</a>
                            </li>
                        </ul>

                        <div class="tab-content p-7 pe-3" data-focus="false" id="tab-layanan">
                            {{-- Tindakan --}}
                            <div class="tab-pane fade show active" id="tindak" role="tab-1">
                                @include(
                                    'pasien.tindakan_peralatan._modal_tambah_tindakan'
                                )
                            </div>

                            {{-- Peralatan --}}
                            <div class="tab-pane fade" data-focus="false" id="peralat" role="tab-2">
                                @include(
                                    'pasien.tindakan_peralatan._modal_tambah_peralatan'
                                )
                            </div>
                        </div>

                    </div>
                </div>

            </div>

            <div class="modal-footer bg-light">
                <div class="row w-100">
                    <div class="col-6">
                        <button type="button" class="btn btn-sm btn-light-primary rounded-1" data-bs-dismiss="modal">{{ __('Tutup') }}</button>
                    </div>
                    <div class="col-6 text-end">
                        <button type="button" class="btn btn-sm btn-primary rounded-1 btn-action-simpan-tdk-alat btn-submit-tera">{{ __('Simpan') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

问题排查与解决方案 #

1. 核心问题分析 #

问题根源是隐藏的Tab（display: none）中的Select2初始化时无法正确计算尺寸：浏览器不会渲染隐藏元素的布局，导致Select2的占位符、下拉框无法正常渲染。此外代码中还存在两处细节错误：

• Select2初始化代码的dropdownParent配置多了一个逗号（语法错误）
• 控制Tab的JS代码中，Tab ID与模态框实际ID不匹配（模态框内Tab ID为tindak/peralat，但JS中用的是tindakan/peralatan）

2. 修复步骤 #

步骤1：修正Tab ID匹配问题

将控制Tab的JS代码中的Tab ID改为与模态框一致：

<script>
    if($('#tipe-data').val() === 'Peralatan'){
        $("#tab_tdk").addClass('active')
        $("#tab_alat").removeClass('active')
        $("#tindak").addClass('show active')
        $("#peralat").removeClass('show active')
    }else{
        $("#tab_tdk").removeClass('active')
        $("#tab_alat").addClass('active')
        $("#tindak").removeClass('show active')
        $("#peralat").addClass('show active')
    }   
</script>

步骤2：修复Select2语法错误

去掉dropdownParent配置后的多余逗号：

$(document).each(function(){
    $('#input-search-peralatan-pasien').select2({
        placeholder: 'Cari Peralatan',
        dropdownParent: $('#input-search-peralatan-pasien').parent('#modal_tambah_tdk_alat_pasien'),
        ajax: {
            // 你的AJAX配置
        }
        // 其他配置
    });
});

步骤3：延迟Select2初始化到Tab激活时

不在页面加载时初始化隐藏Tab的Select2，而是在Tab被激活时再初始化（或重新渲染）：

// 监听Tab切换事件
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
    var targetTabId = $(e.target).attr('href');
    if(targetTabId === '#peralat'){
        $('#input-search-peralatan-pasien').select2('destroy').select2({
            placeholder: 'Cari Peralatan',
            dropdownParent: $('#modal_tambah_tdk_alat_pasien'),
            ajax: {
                // 你的AJAX配置
            }
        });
    }
});

// 页面加载时初始化当前激活Tab的Select2
$(document).ready(function(){
    if($('#peralat').hasClass('show active')){
        $('#input-search-peralatan-pasien').select2({
            placeholder: 'Cari Peralatan',
            dropdownParent: $('#modal_tambah_tdk_alat_pasien'),
            ajax: {
                // 你的AJAX配置
            }
        });
    }
});

步骤4：优化dropdownParent配置

直接指定模态框作为Select2的dropdownParent，避免通过parent()查找出错：

dropdownParent: $('#modal_tambah_tdk_alat_pasien')

3. 额外优化建议 #

给Select2隐藏输入框添加宽度样式，确保自适应Tab宽度：

.select2-hidden-accessible {
    width: 100% !important;
}

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