Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Multiple Select Menggunakan Bootstrap.
Multiple select memudahkan kita untuk mempermudah user memilih pilihannya lebih dari satu pilihan. seperti memilih paket kursus.
Sekarang saya akan mencoba membuat tutorial singkatnya, tentang Cara Membuat Multiple Select Menggunakan Bootstrap:
– Pertama teman-teman download framework bootstrapnya dulu.
– Kedua buka text editor teman-teman lalu buka file bootstrap yang telah kita download dan buat file index.html kemudian ketikan kode di bawah ini, jangan lupa save di dalam folder bootstrap teman-teman:
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Dumetschool</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Dumetschool</h2> <p>Pilih Paket Kursus:</p> <div id="example-optionClass-container"> <select id="example-optionClass" multiple="multiple"> <option value="1">WM Ultimate</option> <option value="2">WM Professional</option> <option value="3">WM Premium</option> <option value="4">GD Professional</option> <option value="5">GD Ultimate</option> <option value="6">GD Premium</option> </select> </div> </div> </body> </html> |
Apabila kita jalankan di browser maka tampilannya akan seperti gambar di bawah ini:
– Nah untuk membuat dropdown menu dan multiple selectnya menjadi lebih bagus kita membutuhkan jQuery dan css, teman-teman ketikan kode di bawah ini pada tag head:
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 |
<!-- Plugin jQuery dan CSS: --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/> <script type="text/javascript"> $(document).ready(function() { $('#example-optionClass').multiselect({ includeSelectAllOption: true, // add select all option as usual optionClass: function(element) { var value = $(element).val(); if (value%2 == 0) { return 'even'; } else { return 'odd'; } } }); }); </script> <style type="text/css"> #example-optionClass-container .multiselect-container li.odd { background: #eeeeee; } </style> |
Klik refresh pada browser teman-teman maka tampilannya akan menjadi seperti ini;
Bagaimana teman-teman cukup mudahkan Membuat Multiple Select Menggunakan Bootstrap.
Sekian artikel saya hari ini tentang Cara Membuat Multiple Select Menggunakan Bootstrap.
Sehat selalu ya teman-teman, selamat mencoba.