Membuat Select Option Dinamis Menggunakan Ajax


Membuat Select Option Dinamis Menggunakan Ajax

Materi membuat select option dinamis dengan ajax merupakan salah satu materi yang paling dicari untuk programmer pemula dalam mengembangkan aplikasi. Dikarenakan saya pribadi sering lupa dengan materi seperti ini maka dari itu saya membuatkan catatan dengan harapan bisa membantu pembaca dalam menyelesaikan jika ada kasus seperti ini.

Select Option Dinamis Menggunakan Ajax PHP

Pada materi HTML sebelumnya sudah pernah di jelaskan apa itu element select box (materi). Elemen <select></select> merupakan tag yang digunakan untuk mepresentasikan pilihan yang sudah disedikan. Elemen ini selalu diikuti oleh <option></option> yang berisikan daftar pilihan. Bentuk umum dari elemen select box ini adalah :

Membuat Select Option Dinamis Menggunakan Ajax

Select option dinamis adalah list pilihan dalam sebuah form yang saling berkaitan. Maksud dari berkaitan disini adalah ketika pilihan ditetapkan maka selanjutkan menampilkan data yang berhubungan pada parent lanjutan. Sebagai contoh misalnya ketika Provinsi dipilih maka akan menampilkan kota/kabupaten yang terkait dengan Provinsi pilihan.

Dalam membuat select option dinamis ini kita memerlukan bantuan Ajax dari library JQuery. Baik langsung saja kita ke contoh kasus disini kita akan menyelesaikan kasus ketika Fakultas dipilih maka akan tampil jurusan yang terkait.

Adapun plugin yang digunakan dalam materi belajar ini adalah sebagai berikut :

JQuery wajib digunakan dalam membuat select option dinamis

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

Boostrap 4 digunakan untuk tampilan lebih menarik, dalam hal ini membuat tampilan select option

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css

Langkah pertama siapkan database dengan tabel tbl_fakultas dan tbl_jurusan

Membuat Select Option Dinamis Menggunakan Ajax
Membuat Select Option Dinamis Menggunakan Ajax

Untuk database lengkapnya bisa di copy-kan code berikut dalam sql

Langkah kedua buatkan file koneksi.php file ini akan menghibungkan database dengan project yang sedang kita kerjakan. Untuk code penghubung database dengan projectnya adalah sebagai berikut :

Selanjutkan kita membuat form yang berkaitan dengan kasus select option dinamis menggunakan ajax, dimana ketika Fakultas dipilih maka akan ditampilkan data Jurusan terkait.

Potongan syntax diatas Kita membuat form dimana fungsinya untuk memproses data. Form ini berisikan data fakultas, dimana ketika fakultas di pilih maka akan menampilkan data jurusan.

Langkah selanjutnya yaitu satu model JavaScrip yang digunakan untuk memproses hasil dari data fakutas yang dikirim pada inputan pertama. Proses ini dikenal juga dengan membuat API dimana data yang ditampilkan berupa string bukan XML atau JSon. Untuk potongan kode JavaScript nya sebagai berikut:

Penjelasan kodingan diatas, $('#fakultas').change(function() fungsinya menangkap id dengan nama fakultas untuk di proses. var fakultas = $(this).val() simpan data dalam variabel fakultas. $.ajax ini merupakan inisialisasi variabel ajax dimana didalamnya terdapat jenis pemprosesa data, url yang digunakan untuk proses data, data yang akan diproses dan hasil yang ditampilkan.

Untuk kodingan lengkap dalam membuat form dapat dilihat di code berikut ini :

Langkah selanjutnya buatkan satu file yang digunakan untuk memproses data fakultas, untuk mendapatkan jurusan yang tergolong dalam fakultas inputan. Disini kita menggunakan nama file ajax_jurusan.php

Potongan code diatas digunakan untuk proses data jurusan yang akan ditampilkan sesuai dengan fakultas yang dipilih. Untuk hasilnya bisa di lihat di gambar dibawah ini.

Kesimpulan Membuat Select Option Dinamis Menggunakan Ajax

Dalam materi belajar membuat selest option dinamis ini dapat disimpulkan bahwa :

  1. Wajib menggunakan JQuery
  2. Pemprosesan lebih cepat



Muzanni

Algorithms Learner, future lecturer and Happy to sharing about knowledge

TUTORIAL MENARIK LAINNYA

Membuat Halaman Web Ajax Tanpa Reload dengan JQuery
Diskusi
Tidak Ada Komentar