我是bootstrap 4的新手，我已经在寻找解决这个问题的任何替代方案。select2都能正常工作，但是当我把它放在@include()的模态选项卡内容中时，它开始以不同的方式工作。

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

• • 这是当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>

当peralatan被放置在tab-content内部时，下面的下拉列表无法正常工作（指示符是占位符未显示时），我一直认为这是tab-content的问题，但它也没有关闭其他可能性，如来自 Bootstrap 本身的modal。

• • 另一个JS代码，用于处理peralatan和tindakan的hide/show div id：**

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

• • 下面是@include('pasien.tindakan_peralatan._modal_tambah_peralatan')中select2的例子：**

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

• • 展示流程的模块完整代码：**

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')
        }

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

如果你知道并能指出我代码中的问题，请帮助我找到它，谢谢：）