Multiselect dropdown with checkboxes demo code in php

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

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script type="text/javascript" src="//cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>

Step 2

HTML Form

<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>

Step 3

Script Files

<script>
 $("#myForm").on("change", "input:checkbox", function(){
 $("#myForm").submit();
 });
var data = "<?php echo $slected_current_data; ?>";
var dataarray=data.split(",");
$("#current_select").val(dataarray);
$(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 
$slected_current_data='';
 if(isset($_POST['current_select_values']))
 {
 $slected_current_data=$_POST['current_select_values']; 
 }
 else
 {
 $slected_current_data="current1"; 
 }

?>

See Demo Code

Multiselect dropdown with checkboxes demo code in php

Leave a Reply

Your email address will not be published. Required fields are marked *