Membuat select dengan select2

Membuat select dengan select2

2742
19
SHARE

Kali ini saya akan berbagi tentang bagaimana membuat select dengan select2. Kita bisa membuat input select kita menjadi lebih bagus dengan menggunakan select2.js.

Bila kita memiliki input select tentu pilihan yang ditampilkan ketika kita mulai mengetik adalah dari option yang memiliki huruf yang sama di paling kiri. Misalnya dalam select ada option ‘Jakarta’, ‘Tangerang’, ‘Yogyakarta’. Kita ketika ‘ta’ pada select maka akan muncul Tangerang. Bila user tidak ingat nama kotanya hanya ingat kotanya mengandung kata ‘ta’, maka daftar kota yang lain tidak akan muncul. Dengan select2, hal tersebut bisa dihindari sehingga lebih memudahkan user.

Select2 memiliki banyak sekali pilihan, misalnya untuk grouping option, tagging, multiselect, ajax select dan lain-lain. Dalam contoh ini saya hanya membuat yang paling sederhana.

Penggunaan lain seperti pada gambar di awal artikel ini. Dimana saya gunakan untuk alamat tujuan pengiriman mail ke banyak user.

Berikut ini adalah kodenya. Anda cukup menambahkan id pada select dan memanggil id tersebut dengan select2 pada javascriptnya. Tentu anda harus memanggil select2 js, select css dan jquery.

Untuk melihat hasilnya silahkan lihat pada halaman demo di link berikut

DEMO

Untuk penggunaan selengkapnya silahkan lihat pada dokumentasi select2. Semuanya sudah jelas, jadi saya rasa tidak perlu dibuatkan contoh satu persatu. hehe

Terima kasih telah berkunjung ke harviacode, jangan lupa di share biar yang lain ikut tahu. 😀

Update

Behubung banyak sekali pertanyaan masuk terkait bagaimana contoh penggunaan select2 pada kondisi real, berikut ini saya berikan contoh CRUD menggunakan select2. Pada contoh ini dibahas tentang bagamana menangani inputan berupa multiple select, baik pada saat tambah data dan juga pada saat edit data. Untuk penyimpanan pada database, kita menggunakan serialize php, sehingga data yang disimpan berupa serial. Untuk lebih jelasnya silahkan download pada link berikut ini.

DOWNLOAD CONTOH PENGGUNAAN SELECT2

Jika masih ada pertanyaan silahkan tulis pada kolom komentar di bawah.

Bagikan artikel ini ya.. terima kasih

19 COMMENTS

  1. mas jika ingin menyimpannya di database bagaimana ???
    apakah fieldnya lebih dari 1 juga atau hanya 1 field kota favorite..
    terima kasih,maaf kalau sering nanya mas soalnya saya lagi belajar web programming

  2. Mas admin, mau nanya..kalo data sudah disimpan ke DB cara pemanggilannya bagaimana ya?sudah saya coba dengan format dibawah tapi muncul cuma 1 selected saja..

    gambarannya sbb,

    <?php
    $det_lokasi = explode(", ", $data['det_lokasi']); // data berupa ('15', '17', '18')
    reset($det_lokasi);
    $i=0;
    $desa = mysql_query("SELECT tbl_desa.DesaId, tbl_desa.name_desa, tbl_kecamatan.name_kecamatan FROM tbl_desa
    JOIN tbl_kecamatan on tbl_desa.kecamtanId=tbl_kecamatan.kecamatanID ORDER BY tbl_kecamatan.name_kecamatan,
    tbl_desa.name_desa");
    while (list(, $value) = each($det_lokasi)) {
    while($datadesa=mysql_fetch_array($desa)){
    if ($datadesa['DesaId']==$value){
    echo "Kec. $datadesa[name_kecamatan] — Ds. $datadesa[name_desa]\n”;
    }
    else {
    echo “Kec. $datadesa[name_kecamatan] — Ds. $datadesa[name_desa]\n”;
    }

    $i++;
    }

    }

    ?>

    • pakai in_array aja mas. sama itu yg disimpen di database tidak usah pakai tanda petik. ini contoh nya

      < ?php $det_lokasi = explode(", ", $data['det_lokasi']); // data berupa ('15', '17', '18') => HARUSNYA 15,17,18 (tidak pakai tanda petik)

      $desa = mysql_query(“SELECT tbl_desa.DesaId, tbl_desa.name_desa, tbl_kecamatan.name_kecamatan FROM tbl_desa
      JOIN tbl_kecamatan on tbl_desa.kecamtanId=tbl_kecamatan.kecamatanID ORDER BY tbl_kecamatan.name_kecamatan,
      tbl_desa.name_desa”);

      while ($datadesa = mysql_fetch_array($desa)) {
      if (in_array($datadesa[‘DesaId’], $det_lokasi)) // PAKAI FUNGSI IN_ARRAY() untuk cek
      {
      echo “Kec.” . $datadesa[‘name_kecamatan’] . “— Ds.” . $datadesa[‘name_desa’] . “
      “;
      }
      }
      ?>

    • ok mas Danny itu artikelnya udah saya update, silahkan download contoh CRUD menggunakan select pada link yang tersedia. Jika masih bingung, silahkan tulis di kolom komentar lagi hehe

      • gann, sudah dicoba, works. thank you ya.
        selama ini saya ngubek-nya pake $ajax, bukan query langsung di select nya 🙁
        btw apa bedanya pake $ajax ama query langsung kaya yang di contoh itu
        terus satu lagi, kalo onselect nya terus populate di hidden input caranya gimana yah
        saya baca-baca di readme nya select2, pake perinta select2:select.
        mohon diberi pencerahan lagi, thank you

LEAVE A REPLY