Plugin Multiple Select Bootstrap 4

26/06/2019    Risman Hakim    4760    Website

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

Bootstrap

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
chatarrow