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.

multiselect dropdown with checkbox jquery,jquery multiselect dropdown with checkbox,multiselect checkbox dropdown jquery,multiselect dropdown with checkbox jquery plugin
multiselect dropdown with checkbox jquery


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"; 
 }

?>

jquery multiselect dropdown list with checkboxes for multiple select dropdown with checkboxes,multiselect dropdown with checkbox
multiselect dropdown checkbox jquery

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.