Cara Membuat Multiple Select Di Satu Tag Select

Yang di maksud dengan Cara Membuat Multiple Select Di Satu Tag Select adalah ketika kita menentukan banyak pilihan di dalam satu tag select html. Cara ini sudah banyak digunakan di beberapa marketplace ketika kita berperan sebagai penjual dan disitu kita akan menemukan multiple select di dalam satu tag select html. Salah satunya ketika kita mengisi kategori di data produk.

Cara Membuat Multiple Select Di Satu Tag Select sangat mudah sekali. Kita akan menggunakan bootstrap untuk tampilan inputnya. Kita juga akan menggunakan jquery dan select2 javascript. Untuk select2 teman-teman bisa kunjungi website resminya disini.

Langkah selanjutnya kita akan membuat struktur html yang berisi tag satu select html. Dan beberapa link yang kita butuhkan seperti script di bawah ini.

<!doctype html>

<html>

    <head>

        <title>Cara Membuat Multiple Select Di Satu Tag Select</title>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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

    </head>

    <body style="background: lightblue">

        <div style="width: 500px; padding: 15px; margin:200px auto;">

            <div class="form-group">

               <h1>Cara Membuat Multiple Select Di Satu Tag Select</h1>

                <label>Paket Kursus Dumet School</label>

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

                    <option value=""></option>

                    <option value="Web Master">Web Master</option>

                    <option value="Web Programming">Web Programming</option>

                    <option value="Web Design">Web Design</option>

                    <option value="Digital Marketing">Digital Marketing</option>

                    <option value="Coding For Kids">Coding For Kids</option>

                    <option value="Grafic Desain">Grafic Desain</option>

                    <option value="Motion Grafic">Motion Grafic</option>

                </select>

            </div>

        </div>

</body>

</html>

Untuk attribute name="paket[]" dan multiple="multiple" di dalam tag select teman-teman wajib cantumkan ya. Karena untuk name ini akan menampung pilihan yang kita pilih dalam bentuk data array. Sedangkan multiple berfungsi untuk mengaktifkan multiple selectnya. Langkah terakhir kita akan membuat placeholder untuk tag selectnya seperti berikut ini.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

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

        <script>

            $(document).ready(function () {

                $("#paket").select2({

                    placeholder: "Silahkan Pilih"

                });

            });

        </script>

Jika sudah teman-teman bisa buka di browser masing-masing, maka akan tampil seperti gambar di bawah ini.

Demikian Cara Membuat Multiple Select Di Satu Tag Select. Sampai jumpa di pembahasan berikutnya. Semoga bermanfaat dan selamat mencoba.