Hallo sahabat dumenity berjumpa lagi dalam tutorial dumetschool, pada tutorial kali ini saya akan membahas tentang Menampilkan Value Select Menggunakan Onchange. Onchange merupakan event untuk menampilkan sesuatu pada element HTML select, text, atau textarea apabila sebuah elemen HTML tersebut telah diubah nilainya sebelum elemen tersebut kehilangan fokusnya. Pada tutorial kali ini saya akan membahasnya pada sebuah select dan input type text.
Di dalam pembuatan website, event – event javascript sangatlah diperlukan karena akan mempermudah dalam pengolahan data, seperti yang akan saya lakukan di bawah ini. Pada tutorial kali ini saya akan membuat menu select di mana kita user mengklik atau memilih menu select tersebut akan muncul sebuah value disampingnya, misalnya saya akan membuat menu select berupa electronic seperti tv, kulkas dan jam ketika si user memilih salah satu menu tersebut maka 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 menu barang, maka function price akan menjalankan perintahnya, pertama dia akan mengambil value yang ada di dalam select tersebut melalui id menggunakan fungsi getElementById. Lalu nilai tersebut akan di tampung di variable tes. Setelah itu nilai dari variable tes akan di tampilkan ke dalam input type text.
hasil dari script di atas:
Dan ketika user memilih salah satu menunya maka akan mencul harga dari barang yg dipilih:
Oke cukup mudah bukan.