Event Handling Onchange() Javascript

Beberapa artikel lalu, kita telah membahas beberapa event handling. Kali ini kita akan membahas mengenai salah satu event handling lainnya. Yakni event handling onchange(). Apa itu event onchange()? Salah satu event handling atau suatu aksi yang berfungsi pada suatu object yang akan melakukan proses ketika mendapatkan suatu perintah. Untuk penggunaannya, biasa diletakkan pada element select option.

Langsung saja kita akan membuat codenya. Kita akan membuat element select option terlebih dahulu. Berikut codenya untuk penulisan element select option.

 
<select id="kota" onchange="pilihKota()">
	<option value="jkt">Jakarta</option>
	<option value="sby">Surabaya</option>
	<option value="bdg">Bandung</option>
</select>

//menampilkan hasilnya dalam text
<span class="hasil"></span>
 

Setelah selesai, begini codenya untuk penulisan pada javasript yang berfungsi untuk memproses event handling onchange().

 
<script type="text/javascript">
	//membuat function
	function pilihKota{
		//membuat parameter dan memanggil value dari id select
		var nilai= document.getElementById("kota").value;

		//menampilkan hasil pada class hasil
		document.getElementById("hasil").value=nilai;
	}
</script>
 

Pada code di atas adalah bentuk dasar penulisan fungsi pada Javascript. Anda juga bisa menuiskan dalam bentuk lain. Misalkan dengan bentuk JQuery. yang apabila di tulis, berikut codenya:

 
<script type="text/javascript">
	$( "#kota" ).change(function() {
		$('.hasil').html($('#kota').val());
	});
</script>
 

Berikut ini adalah codenya untuk penulisan menyeluruh menggunakan JQuery yang terlihat lebih simple digunakan.

See the Pen
Untitled by codenya.com (@codenyacom)
on CodePen.

 
Nah mudah sekali bukan? demikianlah pembahasan singkat mengenai Javascript Event handling Onchange(). Semoga bermanfaat untuk Anda. Apabila ada yang ditanyakan atau penulisan dari saya kurang tepat, silahkan Anda tulis komentar di bawah ini. Terima kasih dan selamat mencoba.