Menampilkan Value Select Menggunakan Onchange
Hallo sobat dumenity berjumpa lagi pada panduan Source Code Aplikasi, di panduan kali ini saya akan membahas mengenai Menampilkan Value Select Menggunakan Onchange. Onchange adalah sebuah event bagi menampilkan sesuatu di element HTML select, text, atau textarea apabila sebuah unsur HTML tersebut telah diubah nilainya sebelum unsur tersebut kehilangan fokusnya. Di panduan kali ini saya akan membahasnya di sebuah select dan input type text.
Di pada perancangan blog, event – event javascript sangatlah diperlukan karena akan mempermudah pada pengolahan data, seperti yang akan saya lakukan di bawah ini. Di panduan kali ini saya akan membangun fitur select di mana kita user mengklik atau memilih fitur select tersebut akan muncul sebuah value disampingnya, misalnya saya akan membangun fitur select berupa electronic seperti tv, kulkas dan jam ketika si user memilih diantara fitur tersebut karenanya saya akan memuncukan harga dari barang tersebut.
oker utntuk lebih jelasnya silahkan lihat contoh di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>
Cara menampilkan value select menggunakan onchange
</title>
</head>
<body>
<select id=barang onchange=price()>
<option value=0>Silahkan Pilih</option>
<option value=100>Kulkas</option>
<option value=200>tv</option>
<option value=300>jam</option>
</select>
<input type=text id=harga>
<script type=text/javascript>
function price() {
var tes = document.getElementById(barang).value;
document.getElementById(harga).value=tes;
}
<script>
</body>
</html>
Dari skrip di atas;
setiap kali user memilih fitur barang, karenanya function price akan menjalankan perintahnya, pertama-tama dia akan mengambil value yang terdapat di pada select tersebut via id menggunakan guna getElementById. Lalu nilai tersebut akan di tampung di variable tes. Setelah itu nilai dari variable tes akan di tampilkan ke pada input type text.
hasil dari script di atas:
Dan ketika user memilih diantara menunya karenanya akan mencul harga dari barang yg dipilih:
Oke lumayan gampang bukan.
Sumber https://kursuswebsite.org
