MEMBUAT SELECT DENGAN SELECT2

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!doctype html>

<html>

    <head>

        <title>Select2 - harviacode.com</title>

        <link rel="stylesheet" href="bootstrap.min.css"/>

        <link rel="stylesheet" href="select2.min.css"/>

    </head>

    <body>

        <div style="width: 300px; padding: 15px">

            <div class="form-group">

                <label>Kota Kelahiran</label>

                <select id="kota" name="kota" class="form-control">

                    <option value=""></option>

                    <option value="Jakarta">Jakarta</option>

                    <option value="Bogor">Bogor</option>

                    <option value="Depok">Depok</option>

                    <option value="Tangerang">Tangerang</option>

                    <option value="Bekasi">Bekasi</option>

                    <option value="Bandung">Bandung</option>

                    <option value="Semarang">Semarang</option>

                    <option value="Yogyakarta">Yogyakarta</option>

                    <option value="Surabaya">Surabaya</option>

                </select>

            </div>

            <div class="form-group">

                <label>Kota Favorit</label>

                <select id="kota2" name="kota2[]" class="form-control" multiple="multiple">

                    <option value=""></option>

                    <option value="Jakarta">Jakarta</option>

                    <option value="Bogor">Bogor</option>

                    <option value="Depok">Depok</option>

                    <option value="Tangerang">Tangerang</option>

                    <option value="Bekasi">Bekasi</option>

                    <option value="Bandung">Bandung</option>

                    <option value="Semarang">Semarang</option>

                    <option value="Yogyakarta">Yogyakarta</option>

                    <option value="Surabaya">Surabaya</option>

                </select>

            </div>

        </div>

        <script src="jquery-1.11.2.min.js"></script>

        <script src="select2.min.js"></script>

        <script>

            $(document).ready(function () {

                $("#kota").select2({

                    placeholder: "Please Select"

                });

                $("#kota2").select2({

                    placeholder: "Please Select"

                });

            });

        </script>

    </body>

</html>

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.

Cari Blog Ini

Sofyan Yusuf © 2019