Cara Membuat Dropdown Dinamis pada Select2 Framework Laravel Menggunakan JQuery-Ajax

Disclaimer :

Artikel ini saya buat hanya untuk dokumentasi karena seringkali lupa scriptnya, kadang ketika browsing di google harus memakan waktu lama sehingga saya membuat artikel ini dengan seadanya.



Sebelum membuat dynamic select2 dari database menggunakan jquery pada framework laravel maka perlu kita buat terlebih dahulu function pada controllernya.


Sebelumnya perlu kita buat function jsonnya terlebih dahulu, contoh saya membuat function get_penanggungjawab.

 public function get_penanggungjawab()  
   {  
     $data = DB::select("SELECT * FROM penanggungjawab");  
     // return $data['aplikasi'];  
     return response()->json($data, 200);  
   }  

Setelah function dibuat maka perlu kita definisikan pada web (routes) agar function tersebut dapat diakses dengan route melalui nama get_penanggungjawab.


Terakhir kita tambahkan script pada tag javascript yang ada dalam file php yang berisi select2nya

   $(document).ready(function() {  
     $(".select2").select2();  // definisikan class select2 sebagai component select2
     let url = "{{ route('get_penanggungjawab') }}"  // set nama routes sebagai url
     $.ajax({  
       type: "GET",  
       url: url,  
       dataType: "html",  //expect html to be returned  
       success: function(data){  
         var d = JSON.parse(data);  
         $('#project_leader').empty()//mengosongkan dropdown  dengan id projrct_leader
         var output = '';  // definikan variabel output
         output += '<option> - Pilih Project Leader - </option>'  
         $.each(d,function(i,e){  
           // console.log(e.nama_penanggungjawab)  // untuk cek data lewat console
           output += '<option value="'+e.id_penanggungjawab+'">'+e.nama_penanggungjawab+'</option>'; // menambahkan data dropdown dari json  
         });  
         $('#project_leader').append(output)  // memunculkan dropdown dari output dalam select yang memiliki id project_leader
       }  
     });  
   });  


Mohon maaf apabila penyampaian artikel kurang jelas, penjelasan terkait coding sudah saya sertakan dalam script box di atas ya




Post a Comment

0 Comments