Cara Mengubah Background Color dengan Select Option

Cara Mengubah Background Color dengan Select Option - jQuery merupakan sebuah library dari javascript yang bertujuan untuk mempermudah dalam menuliskan perintah - perintah baris program. Selain itu jQuery telah banyak digunakan dalam menunjang kebutuhan website seperti animasi, efek dan lain - lain agar tampilan website terlihat lebih interaktif. Di kesempatan kali ini saya akan berbagi tutorial jQuery sederhana yaitu Cara Mengubah Background Color dengan Select Option, jika tutorial ini diterapkan pada halaman website tentu akan membuat halaman websitenya terlihat lebih interaktif. Nah, bagaimana cara membuatnya ? langsung saja simak langkah - langkah nya berikut ini.

Langkah pertama, buatlah satu file index.html untuk membuat elemen option yang akan dijadikan elemen utama untuk mengubah warna dari background body. Silahkan ketikan kode HTML seperti berikut.

<body>
    <label for="">Pilih Warna : </label>
    <select id="select-color">
        <option value="#2196F3">Blue</option>
        <option value="#FFC107">Yellow</option>
        <option value="#4CAF50">Green</option>
        <option value="#E91E63">Pink</option>
        <option value="#9E9E9E">Grey</option>
        <option value="#9C27B0">Purple</option>
    </select>
</body>

Langkah selanjutnya, setelah mengetikan kode HTML seperti diatas yaitu membuat aksi dimana ketika memilih warna pada option nya maka background pada body akan berubah sesuai dengan warna yang dipilihkan. Untuk itu silahkan ketikan kode jQuery berikut ini.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#select-color").change(function(){
        var selectedcolor = $('#select-color').val();  
        $("body").css({"background-color": selectedcolor});
    });
});
</script>

Pada kasus ini saya menggunakan library jQuery secara online, kalian juga bisa menggunakan library jQuery secara offline yaitu dengan download terlebih dahulu pada halaman jquery.com. Setelah semua kode HTML dan jQuery telah diketikan, silahkan simpan kembali file index.html nya kemudian kalian bisa mencoba hasilnya pada browser masing - masing. 

Baiklah, cukup sekian tutorial jQuery sederhana tentang bagaimana Cara Mengubah Background Color dengan Select Option, semoga tutorial ini bermanfaat. Selamat mencoba dan sampai jumpa ditutirial selanjutnya :)

5 Agustus 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat