Cara Mengambil Nilai Dropdown yang Dipilih di JavaScript

Mengetahui pilihan pengguna pada dropdown penting untuk form dinamis, misalnya menampilkan ongkir sesuai kota yang dipilih. Artikel ini membahas cara mengambil nilai dropdown di JavaScript.

Properti value

<select id="kota">
    <option value="jkt">Jakarta</option>
    <option value="bdg">Bandung</option>
</select>

<script>
const sel = document.getElementById("kota");
console.log(sel.value); // "jkt" atau "bdg"
</script>

Contoh Kasus: Ongkir Dinamis saat Memilih Kota

<script>
const ongkir = { jkt: 10000, bdg: 15000 };
document.getElementById("kota").addEventListener("change", function() {
    const biaya = ongkir[this.value] || 0;
    document.getElementById("ongkir").textContent = "Rp" + biaya.toLocaleString("id-ID");
});
</script>

Event change berjalan setiap kali pilihan berubah.

Mengambil Teks Opsi

<script>
const teks = sel.options[sel.selectedIndex].text;
console.log(teks); // "Jakarta"
</script>

Kesimpulan

Gunakan .value untuk mengambil nilai dropdown, dan event change untuk merespons perubahan pilihan, seperti menghitung ongkir. Gunakan options[selectedIndex].text bila butuh teks yang ditampilkan.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

Baca Juga

• Cara Memeriksa Status Checkbox di JavaScript
• Cara Mendeteksi Tombol Enter Ditekan di JavaScript
• Cara Menyalin Teks ke Clipboard di JavaScript