Hallo sahabat berjumpa lagi nih dalam website Dumetschool. Dalam kesempatan kali ini kita akan belajar membuat multi select option, biasanya select option hanya bisa dipilih satu saja. Baiklah tentu dalam kasus ini membuat multi select option dengan checkbox agar bisa memilih dari satu pilihan serta menggunakan JQuery. Yuk mari dimulai saja cara pembuatannya seperti dibawah ini:Disini agar mudah memilih dari satu pilihan tentu ditambahkan dengan input checkbox. Baiklah agar ada gambaran dalam membuatnya langsung intip langkah-langkah berikut.
Langkah pertama
Buat tabel dalam database seperti dibawah ini
sekarang sahabat buat sebuah file index.php kemudian ketikkan code dibawah ini:
jadi code diatas adalah bagian head yang berisi library Bootstrap, JQuery. Berikutnya buat sebuah form yang berisi input select option ketikkan code berikut ini:
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 |
<div class="container bg-info"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <h3 align="center">Membuat Multi Select Options Dengan Checkbox Menggunakan Jquery di PHP</h3> <form method="post" id="form_materi"> <div class="form-group"> <label>Pilih Framework yang dikuasai</label> <select id="framework" name="framework[]" multiple class="form-control"> <option value="Laravel">Laravel</option> <option value="Codeigniter">Codeigniter</option> <option value="YII">YII</option> <option value="CakePHP">CakePHP</option> <option value="Zend">Zend</option> <option value="Slim">Slim</option> <option value="Symfony">Symfony</option> <option value="Phalcon">Phalcon</option> <option value="Slim">Slim</option> <option value="FuelPHP">FuelPHP</option> <option value="Ionic">Ionic</option> <option value="Swift">Swift</option> <option value="Flutter">Flutter</option> </select> </div> <div class="form-group"> <input type="submit" class="btn btn-warning" name="submit" value="Submit"> </div> </form> </div><div class="col-md-3"></div> </div> </div> |
Pada select option diatas jangan lupa berikan value beberapa option yang nanti akan kita pilih.
Langkah kedua
Selanjutnya tambahkan script seprti dibawah ini
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 |
<script> $(document).ready(function(){ $('#framework').multiselect({ nonSelectedText: 'Pilih Framework', enableFiltering: true, enableCaseInsensitiveFiltering: true, buttonWidth:'400px' }); $('#form_materi').on('submit', function(event){ event.preventDefault(); var form_data = $(this).serialize(); $.ajax({ url:"insert.php", method:"POST", data:form_data, success:function(data) { $('#framework option:selected').each(function(){ $(this).prop('selected', false); }); $('#framework').multiselect('refresh'); alert(data); } }); }); }); </script> |
pada script diatas ada fungsi filter dari data-data option serta ada perintah ajax untuk melakukan request insert data sesuai option yang dipilih. Lalu selanjutnya buat file insert.php ketikkan code dibawah ini
insert.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php //insert.php $conn = mysqli_connect("localhost", "dumet", "school", "test"); if(isset($_POST["framework"])) { $materi = ''; foreach($_POST["framework"] as $row) { $materi .= $row . ', '; } $materi = substr($materi, 0, -2); $query = "INSERT INTO tb_materi(materi) VALUES('".$materi."')"; if(mysqli_query($conn, $query)) { echo 'Data Inserted'; } } ?> |
JIka sudah simpan file diatas lalu jalankan pada browser maka akan seperti ini tampilnya
Nah pada tampilan diatas saat di klik select option akan tampil form search yang dapat memfilter data option-option. Jika sahabat sudah memilih beberapa option lalu klik submit untuk menyimpan datanya.
Demikian pembahasan artikel ini tentang Cara Membuat Multiselect Options Dengan Checkbox Menggunakan Jquery di PHP. Semoga bermanfaat dan sampai jumpa.
teriam kasih