Cara Menggunakan Event Onchange Pada Javascript -

Hallo Sahabat Dumetschool berjumpa kembali bersama saya pada website kursuswebdesign. Pada artikel kali ini saya akan membuat tentang cara menggunakan Event Onchange pada form select option. Disini saya gunakan untuk menampung dan menampilkan sebuah data, contohnya saat kita memilih sebuah kategori akan ada subkategori lagi seperti itu gambaran kurang lebihnya.Fungsi Onchange ini saya gunakan pada select option yang berfungsi untuk menampilkan sebuah nilai atau data sesuai option yang dipilih,dalam kasus ini saya membuat 2 buah Option atau pilihan, pada option pertama atau sebagai judul atau kategori utama dan pada option kedua sebagai subjudul atau bagian detailnya. Supaya tidak binggung dan mudah untuk dipahami langsung saja kita praktekkan saja.

Pertama membuat sebuah file HTML dan coba ketikan syntax HTMLnya seperti berikut ini :

<!DOCTYPE html>
<html>
<head>
	<title>Menggunakan Onchange pada Select option dengan Javascript</title>
	
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-5">
		<div class="row">
			<div class="col-md-4">
	<h3>Kendaraan Roda Dua</h3>
	</div>
	<div class="col-md-4">
	Model Kendaraan :
	<select id="pilih" name="pilih" onchange="populate(this.id,'milih')">
		<option value=""></option>
		<option value="Matic">Matic</option>
		<option value="Semi Sport">Semi Sport</option>
		<option value="Sport">Sport</option>
	</select>
	<br></div>
	<div class="col-md-4">
	Nama Model:
	<select id="milih" name="milih"></select>
	</div>
	</div></div>
</body>
</html>

Selanjutnya sahabat ketikan script dari Javascript nya sisipkan pada diantara tag<head> seperti dibawah ini:

<script type="text/javascript">
		function populate(plh,mlh){
			var plh = document.getElementById(plh);
			var mlh = document.getElementById(mlh);
			mlh.innerHTML = "";
			if(plh.value == "Matic"){
				var optionArray = ["|","nyimax|Nyimax","kerox|Kerox","sio|Meong"];
			}else if(plh.value == "Semi Sport"){
				var optionArray = ["|","jepiter|Jepiter","jepiter mx|Jepiter MX","pixion|Pixion"];
			}else if(plh.value == "Sport"){
				var optionArray = ["|","x-bre|X-Bre","r15|R15","r25|R25"];
			}
			for (var option in optionArray) {
				var pair = optionArray[option].split("|");
				var newOption = document.createElement("option");
				newOption.value = pair[0];
				newOption.innerHTML = pair[1];
				mlh.options.add(newOption);
			}
		}
	</script>

penjelasan pada script diatas function populate(plh,mlh) merupakan value dari Onchange bisa sahabat perhatikan pada file HTML yang terdapat pada id=”pilih” ,dan saya menggunakan var plh ,var mlh untuk mengambil atau menampung nilai berdasarkan id pada setiap select option nya. Jadi setiap nilai select yang pertama terdapat data array yang dimana saat dipilh salah satu maka akan menampilkan data pada select option yang kedua. Jika sahabat jalankan pada browser maka tampilannya seperti dibawah ini:

Demikian pembahasan artikel tentang Cara Menggunakan Event Onchange Pada Javascript, semoga bermanfaat dan selamat mencoba ,sampai berjumpa lagi pada artikel lainya.

terima kasih

Cara Menggunakan Event Onchange Pada Javascript

Kategori