Select Dropdown Onchange Javascript

Select Dropdown Onchange Javascript

3 min read Jun 20, 2024
Select Dropdown Onchange Javascript

Memilih Dropdown dengan JavaScript

JavaScript menyediakan cara yang mudah untuk memanipulasi dropdown (select) dan melakukan tindakan ketika nilai dropdown berubah. Berikut cara kerjanya:

Menambahkan Event Listener

Pertama, kita perlu menambahkan event listener onchange ke elemen dropdown. Event listener ini akan dijalankan setiap kali nilai dropdown berubah.

// Dapatkan elemen dropdown dengan ID "myDropdown"
const myDropdown = document.getElementById("myDropdown");

// Tambahkan event listener "onchange"
myDropdown.addEventListener("change", function() {
  // Lakukan sesuatu ketika dropdown berubah
});

Mendapatkan Nilai yang Dipilih

Di dalam event listener, kita dapat menggunakan this.value untuk mendapatkan nilai yang dipilih pada dropdown. Nilai ini akan menjadi nilai yang dikaitkan dengan opsi yang dipilih.

// Dapatkan elemen dropdown dengan ID "myDropdown"
const myDropdown = document.getElementById("myDropdown");

// Tambahkan event listener "onchange"
myDropdown.addEventListener("change", function() {
  // Dapatkan nilai yang dipilih
  const selectedValue = this.value;

  // Lakukan sesuatu dengan selectedValue
  console.log("Nilai yang dipilih:", selectedValue);
});

Contoh Penggunaan

Berikut adalah contoh penggunaan onchange untuk menampilkan pesan yang sesuai dengan nilai yang dipilih pada dropdown:




  Contoh Dropdown


  

  

Contoh ini akan menampilkan pesan yang sesuai dengan nilai yang dipilih pada dropdown di dalam elemen <p> dengan ID output.

Kesimpulan

Dengan menggunakan event listener onchange di JavaScript, kita dapat dengan mudah memanipulasi dropdown dan melakukan tindakan yang diinginkan ketika nilai dropdown berubah. Hal ini memungkinkan kita untuk membuat aplikasi web yang lebih interaktif dan responsif.