Cara Merubah Value Select Menjadi Class Dengan Javascript

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School, berjumpa lagi dengan saya pada pembahasan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Merubah Value Select Menjadi Class Dengan Javascript dimana pada artikel kali ini kita akan memanfaatkan value pada select option untuk kita jadikan class yang mana dalam hal ini saya menggunakan bootstrap 4. Jadi ketika kita memilih salah satu value pada select option maka dengan otomatis output akan berubah sesuai class pada bootstrap, dalam latihan ini saya ingin menampilkan alert pada bootstrap 4 yang akan kita ambil menggunakan fungsi onchange yang artinya memilih lalu kita tampilkan pada tag html.

Baik langsung saja kita implementasikan Cara Merubah Value Select Menjadi Class Dengan Javascript pertama-tama yang harus kita lakukan adalah menyiapkan bootstrap.min.css teman – teman bisa download di website resminya yaitu getbootstrap.com jika sudah teman – teman buka text editornya dan save dengan nama index.html lalu buat struktur html nya terlebih dahulu bisa lihat pada script di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><strong>Cara Merubah Value Select Menjadi Class Dengan Javascript</strong>.</title>
</head>
<body>
	<p id="output">Masukkan Output Disini</p>
	<select>
		<option value="light">Light</option>
		<option value="danger">Danger</option>
		<option value="success">Success</option>
		<option value="primary">Primary</option>
		<option value="warning">Warning</option>
		<option value="info">Info</option>
		<option value="secondary">Secondary</option>	
		<option value="dark">Dark</option>
	</select>
</body>
</html>

Kemudian kita langsung saja panggil di dalam file bootstrap.min.css yang sudah kita siapkan

<link rel="stylesheet" href="bootstrap.min.css">

Kemudian kita menggunakan fungsi onchange untuk memilih value nya, pertama kita buat fungsi terlebih dahulu

onchange = function() {
		  
		}

Kemudian di dalam nya kita akan langsung panggil id outputnya dan isi class bootstrap nya untuk melengkapi data yang kita pilih

document.getElementById("output").className = "alert alert-"+

Lalu kita panggil select nya dan ambil data valuenya

document.querySelector("select").value;

Jika sudah save dan jalankan pada browsernya, maka akan tampil seperti gambar di bawah ini

Jika saya memilih salah satu value dari select maka alert akan muncul pada outputnya

Begitupun dengan value yang lain akan berubah sesuai class nya bootstrap, baik sekian pada artikel kali ini tentang Cara Merubah Value Select Menjadi Class Dengan Javascript kita jumpa lagi pada artikel yang akan datang. Terimakasih dan sampai jumpa.

Semoga bermanfaat.

Cara Merubah Value Select Menjadi Class Dengan Javascript

Kategori