Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Dropdown menggunakan Jquery dan OOP. Menambahkan dropdown Dependent akan menjadi fitur yang sangat berguna . Sebagai contoh, jika kita perlu daftar posting berdasarkan kategorinya maka kita dapat memiliki dropdown kategori-posting dependen. Dalam tutorial ini, kita akan membuat dropdown daftar nama negara-negara . Untuk mengubah nilai dropdown negara, opsi dropdown negara dimuat secara dinamis. Saya menggunakan jQuery AJAX untuk mendapatkan opsi pilahan untuk dropdown daftar nama negara berdasarkan negara yang dipilih.

Kode HTML untuk Dropdown

Kode HTML berikut berisi dropdown untuk nama – nama negara dan negara bagian. Pilihan negara dibaca dari database dan ditampilkan dalam dropdown pada pemuatan halaman. Awalnya, dropdown negara tidak memiliki opsi. Pada saat mengubah nilai dropdown nama negara  negara, fungsi jQuery dipanggil untuk mendapatkan opsi status dependen dan dimuat secara dinamis.

Mendapatkan data menggunakan jQuery AJAX

Script jQuery berikut ini menunjukkan fungsi untuk mengirim permintaan AJAX ke PHP untuk membaca daftar negara tergantung pada negara yang dipilih. Panggilan AJAX ini diatur dengan ID negara yang dipilih.

Script untuk membaca Database Negara menggunakan PHP

Dalam PHP, ia menghubungkan database untuk mengambil nilai-nilai pada tabel “negara”  berdasarkan pada id negara yang dilakukan oleh panggilan AJAX jQuery. Ini membentuk opsi dropdown negara dan kembali sebagai respons AJAX. Tanggapan ini dimasukkan ke dropdown negara bagian.

 

File koneksi,

berikut screenshot hasil dari codingan di atas,

Cara Membuat Dropdown menggunakan Jquery dan OOP

Oke itulah tadi pembahasan saya tentang Cara Membuat Dropdown menggunakan Jquery dan OOP, semoga bermanfaat.