Cara Merubah Value Select Menjadi Class Dengan Javascript
Halo Dumenity, selamat datang kembali di situs tips dan trik Source Code Aplikasi, berjumpa lagi dengan saya di pembahasan tips dan trik seputar dunia situs. Di kesempatan kali ini saya akan memberikan tips dan trik mengenai Cara Merubah Value Select Menjadi Class Dengan Javascript dimana di artikel kali ini kita akan memanfaatkan value di select option bagi kita jadikan class yang mana pada hal ini saya menggunakan bootstrap 4. Jadi ketika kita memilih diantara value di select option karenanya dengan otomatis output akan berubah sesuai class di bootstrap, pada latihan ini saya ingin menampilkan alert di bootstrap 4 yang akan kita ambil menggunakan kegunaan onchange yang artinya memilih lalu kita tampilkan di tag html.
Bagus seketika saja kita implementasikan Cara Merubah Value Select Menjadi Class Dengan Javascript pertama-tama yang mesti kita lakukan yakni menyiapkan bootstrap.min.css teman – teman dapat unduh di situs resminya yaitu getbootstrap.com kalau telah teman – teman buka text editornya dan save dengan nama index.html lalu bikin struktur html nya terlebih dahulu dapat lihat di 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=informasi>Informasi</option>
<option value=secondary>Secondary</option>
<option value=dark>Dark</option>
</select>
</body>
</html>
Kemudian kita seketika saja panggil di pada file bootstrap.min.css yang telah kita siapkan
<link rel=stylesheet href=bootstrap.min.css>
Kemudian kita menggunakan kegunaan onchange bagi memilih value nya, pertama-tama kita bikin kegunaan terlebih dahulu
onchange = function() {
}Kemudian di pada nya kita akan seketika panggil id outputnya dan isi class bootstrap nya bagi melengkapi data yang kita pilih
document.getElementById(output).className = alert alert-+
Lalu kita panggil select nya dan ambil data valuenya
document.querySelector(select).value;
Seandainya telah save dan jalankan di browsernya, karenanya akan tampil seperti gambar di bawah ini
Seandainya saya memilih diantara value dari select karenanya alert akan muncul di outputnya
Begitupun dengan value yang lain akan berubah sesuai class nya bootstrap, bagus demikian di artikel kali ini mengenai Cara Merubah Value Select Menjadi Class Dengan Javascript kita jumpa lagi di artikel yang akan datang. Terimakasih dan hingga jumpa.
Semoga bermanfaat.
Sumber https://kursuswebsite.org
