Hai teman-teman semuanya? apa kabar, semoga masih tetap dalam keadaan sehat, kita lanjut lagi pembahasan kita yang masih seputar javascript, pada pembahasan kali ini kita akan membuat suatu studi kasus sederhana yaitu filter data menggunakan select option dengan javascript.

Jadi nanti idenya kita akan membuat select option yang berfungsi menampilkan data sesuai dengan nilai yang kita pilih pada optionnya, untuk lebih jelasnya kita langsung saja praktekan, pertama silahakan buat sebuah file dan ketikan script html seperti berikut ini:

Saya menggunakan bootstrap, dan bisa teman-teman -ahami sendiri dari struktur yang saya buat, ksilahakan teman-teman jalankan pada browser masing masing, yang terlihat hanya select option saja pada browser karna kita belum buat fungsinya, nah sekarang kita masuk pada bagian javascriptnya, silahakan teman-teman buat sebuah file dan ketikan script seperti berikut ini:

Saya membuat sebuah fungsi dengan nama load yang mempunyai parameter dengan nama nilai, yang dimana fungsi ini meloping sebanyak nilai yang nanti kita masukan kedalam parameternya, setelah itu saya membuat sebuah fungsi event dengan addEventListener() ketika select diubah nilainya makasaya membuat sebuah var let nilai dimana nilai nya dari value id selectnya, lalu saya menjalankan fungsi load untuk melooping sebanyak nilai yang saya ambil dari value optionnya,

Jika sudah maka hasilnya akan seperti berikut ini:

Filter Data Menggunakan Select Option Dengan Javascript 1

datanya akan tampil sesuai snilai select yang dipilih.

Oke teman-teman saya rasa untuk tutorial kali ini tentang Filter Data Menggunakan Select Option Dengan Javascript  saya rasa cukup sampai sini dulu, semoga tutorial kali ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya,

Terima kasih