Being a developer you may face a situation, have to give multiple select option for the front end user, now it is easy with the help of bootstrap multiselect script we can accomplish that task within 10 minutes. Here am going to explain you Multi select drop down with check boxes demo code in php
here is the Multiselect dropdown with checkboxes demo code in php
Step 1
Files To Include
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script 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"> </script>
Step 2
HTML Form
<div class="container-fluid"style="text-align: center;margin-bottom:200px;"> <h1>Demo Multiselect Box In PHP</h1> <div class="row"> <div class="col-md-12" > <form id="myForm" method="POST"> <input name="current_select_values" type="hidden" value="" id="current_select_values"> <div class="col-md-12" > <select size="5" name="current_select[]" multiple="multiple" id="current_select"> <option value="current1">current1</option> <option value="current2">current2</option> <option value="current3">current3</option> <option value="current4">current4</option> <option value="current5">current5</option> </select> </div><div class="col-md-12" style="margin-top:20px;" > <input type="submit" value="Submit" ></div> </form></div></div></div>
Step 3
Script Files
<script> $(document).ready(function() { $('#current_select').multiselect({ nonSelectedText: 'Select Current' }); }); $(function () { $('#current_select').multiselect({ buttonText: function(options, select) { var labels = []; console.log(options); options.each(function() { labels.push($(this).val()); }); $("#current_select_values").val(labels.join(',') + ''); return labels.join(', ') + ''; //} } }); }); </script>
Step 4
Post Action
<?php print_r ($_POST['current_select']); ?>
See Demo Code