Cara Mengubah Background Color dengan Select Option

05/08/2019    Risman Hakim    179     Website

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 :)

jQuery, Web Design

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More