Card image cap
[Plugins][2] Select / Combobox Menarik dengan Select2.js
Tuesday, 09 Apr 2019

Hello world,

Pada seri kedua pembahasan mengenai plugin adalah select2. Select2 adalah sebuah plugin yang memungkinkan combobox (select option) yang kita buat menjadi lebih menarik dengan adanya fitur search, multi select dll dengan semboyan "The jQuery replacement for select boxes". Penggunaannya sangat mudah. Di web officialnya sudah ada dokumentasi yang cukup banyak yang bisa kita ikuti.  Versi terbaru saat post ini saya tulis adalah v-4.0.6. Oke langsung saja masuk ke pembahasan dan contoh. Plugin ini berjalan dengan mengandalkan Jquery. Jadi wajib memasang Jquery.min.js sebelum memasang select2 pada web kita. Jquery dapat diambil di sini

Tahap pertama yang harus dilakukan adalah memasang javascript dan css dari select2.

Melalui CDN.

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js">script>

Atau Download 

Di sini

Tahap selanjutnya kita inisiasi javascript untuk menjalankan select2 di dalam website.

$(document).ready(function() {
    $('.select2').select2();
});

Tanda berwarna biru di atas adalah nama class yang bisa kita pasang pada tag select seperti contoh berikut.

<select class="select" name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Setelah semua dipasang, jika tidak ada kendala atau bentrok dengan script lain dipastikan combobox kalian akan berubah menjadi lebih menarik dengan adanya fitur search pada combobox kalian.

Selamat mencoba :)