Plugin Multiple Select Bootstrap 4

Plugin Multiple Select Bootstrap 4 - Saat ini penggunaan plugin untuk menunjang tampilan website sangatlah penting, karena penggunaan sangat mudah, tinggal configurasi library dan penyesuain elemen yang ingin digunakan. Ada banyak sekali plugin yang bisa kita download dan digunakan secara gratis. Seperti plugin yang berikut akan saya bagikan yakni Plugin Multiple Select Bootstrap 4. Plugin ini bisa kita gunakan pada select dimana nilai nya bisa kita pilih lebih dari satu pilihan (Multiple). 

Dibawah ini saya akan praktekan bagaimana plugin ini bisa di terapkan pada elemen select. Untuk bisa mendapatkan plugin ini kalian bisa download link nya dibawah ini

Download

Baik, setelah di download file nya kalian bisa cari library dan komponen seperti bootstrap.css dan yang lain nya, atau kalian bisa ikutin praktek berikut ini.

Silahkan buat file index.html, kemudian kalian ketikan kode HTML untuk membuat elemen select seperti berikut.

<body>
    <div class="container mt-3">
        <div class="row">
            <div class="col-md-4">
                <select class="selectpicker form-control" multiple data-live-search="true">
                  <option data-icon="icon-heart">Web Master</option>
                  <option>Graphic Design</option>
                  <option>Web Programming</option>
                  <option>Digital Marketing</option>
                  <option>Web Design</option>
                  <option>Mobile Apps</option>
                </select>
            </div>
        </div>
    </div>
</body>

Setelah membuat elemen select seperti diatas, selanjutnya sisipkan library dari plugin select bootstrap dan kode JS seperti berikut.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

Pastikan nama attribute didalam elemen select diketikan semua seperti pada contoh diatas.

Setelah semua kode telah diketikan semua, silahkan simpan kembali file nya kemudian buka pada browser untuk melihat hasil akhir nya. Selesai

Baiklah, cukup sekian artikel kali ini, semoga bermanfaat dan menambah referensi plugin buat kalian. Selamat mencoba dan sampai jumpa di artikel dumetschool selanjutnya :)

26 Juni 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