Cara Menampilkan Value Yang Pilih Pada Combobox Javascript(onChange)

Hari minggu alhamdulillah masih sempet buat nulis artikel lagi, seperti judul di atas kali ini saya mau ngasih koding Javascript Cara Menampilkan Value Yang Pilih Pada Combobox.

Beikut ini adalah Contoh Kasusnya:

Saya mempunyai combobox(select) yang berisi valeu berupa warna-warna dengan id combobox (warna), kemudian saya ingin menampilkan hasil pilihan saya di <div id='tampil_warna'></div>.


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<select id="warna" onchange="pilihanku()">
<option value=''>Silahkan Pilih Warna Yang Anda Suka</option>
<option value='Merah'>Merah</option>
<option value='Kuning'>Kuning</option>
<option value='Hijau'>Hijau</option>
</select>
<div id="tampil_warna"></div>

<script>
function pilihanku() {
    var x = document.getElementById("warna").value;
    document.getElementById("tampil_warna").innerHTML = "Wow pilihan warnamu adalah: " + x;
}
</script>


Penjelasan:

1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>: Jquery versi 1.12.2
2.  onchange="pilihanku()": event javascript ketika data diubah.
3. document.getElementById("warna").value: Mengambil value dari id 'warna'.
4. document.getElementById("tampil_warna").innerHTML: Tampilkan data di id 'tampil_warna'

Saya kira cukup jelas ya, untuk pertanyaan silahkan berikan komentar pada form dibawah. Semoga Bermanfaat :-D

Author : Resep Masakan Mantap

Share this

Related Posts