Cara mengatasi issue jquery select2 didalam modal bootstrap 3 dan 4

Cara mengatasi issue jquery select2 didalam modal bootstrap 3 dan 4

Mungkin jika sobat menggunakan select2 didalam modal pastinya akan mengalami bug pada select2 yang tampil dibelakang modal dan tidak aktif. 

Select2 Modal Bootstrap

Penggunaan select2 pada Bootstrap sendiri harus diperhatikan agar tidak saling tumpang tindih antara form satu dengan select dropdown dan harus memperhatikan z-index pada form container dan attribut lainnya.

Select2 in Modal z-index

Untuk mengatasi penggunaan select2 didalam modal caranya sebagai berikut:

#pertama
atur z-index css pada select2 sobat bisa menambahkan diatas form modal atau membuat css custom seperti berikut

<style>
.select2-container{
    z-index:100000;
}
</style>

#kedua
setelah langkah pertama selesai sobat perlu menambahkan placeholder pada select2 seperti berikut agar bisa digunakan

$('.select2').select2({
dropdownParent: $('#default-modal')
});

dan saat edit data agar bisa selected silahkan gunakan seperti ini

$("#zone_id").val ('12' ).trigger('change');

sampai disitu sudah bisa digunakan dan sobat bisa dengan mudah menggunakannya.