Multiselect dropdown with checkboxes demo code in php

Today, We want to share with you Multiselect dropdown with checkboxes demo code in php.In this post we will show you multiple select dropdown with checkbox in php, hear for Multi select drop down with check boxes demo code in php we will give you demo and example for implement.In this post, we will learn about Jquery Multi-select Dropdown Checkbox With Search with an example.

Multi Select Dropdown with Checkbox using Bootstrap, jQuery and PHP

here is the Best Example of the Multi-select dropdown with checkboxes demo code in php step by step.

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="onlineTutorials" method="POST">
<input name="active_web_choose" type="hidden" value="" id="active_web_choose">
<div class="col-md-12" >
 <select size="5" name="online_select" multiple="multiple" id="online_select">
 <option value="pakainfo">pakainfo</option>
 <option value="w3school2">w3school2</option>
 <option value="w3school3">w3school3</option>
 <option value="w3school4">w3school4</option>
 <option value="w3school5">w3school5</option>
 </select>
 </div><div class="col-md-12" style="margin-top:20px;" >
 <input type="submit" value="Submit" ></div>
</form>

Step 3 : Script Files

<script>
 $("#onlineTutorials").on("change", "input:checkbox", function(){
 $("#onlineTutorials").submit();
 });
var data = "<?php echo $active_website_name; ?>";
var dataarray=data.split(",");
$("#online_select").val(dataarray);
$(function () {
 $('#online_select').multiselect({ 
 buttonText: function(options, select) {
 var labels = [];
 console.log(options);
 options.each(function() {
 labels.push($(this).val());
 });
 $("#active_web_choose").val(labels.join(',') + '');
 return labels.join(', ') + '';
 //}
 }

 });
});

</script>

Step 4: Post Action

<?php 
$active_website_name='';
 if(isset($_POST['active_web_choose']))
 {
 $active_website_name=$_POST['active_web_choose']; 
 }
 else
 {
 $active_website_name="pakainfo"; 
 }

?>

I hope you get an idea about dynamic multi select dropdown with checkbox jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.