Bootstrap Multiselect Dropdown With Checkbox Using Jquery In Php

In this tutorial, we will explain to you how to create bootstrap multiselect dropdown with checkbox using jquery In Php. Sometimes we need to select multiple options in the dropdown list with checkbox to search items.

In this example, We use the bootstrap multiselect plugin for create multiple dropdown with checkbox using Bootstrap, jQuery and PHP.

Include Bootstrap and jQuery CDN Files

In this step, We need to include the bootstrap CDN and jquery CDN in our PHP file.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <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" />

Create Multiselect Dropdown with Checkbox

Now, we will create the jquery multiselect dropdown using bootstrap. so you can see our full example code file.

  <div class="container">
   <h2 align="center">Multiselect Dropdown With Checkbox In Php</h2>
   <form method="post" id="cars_form" name="cars_form">
    <div class="col-md-3">
    </div>
	<div class="col-md-7">	
		<div class="form-group">
		 <label>Select Cars:</label><br/>
		 <?php
				$cars = array (
				  array("id"=>1,"name"=>"Volvo"),
				  array("id"=>2,"name"=>"BMW"),
				  array("id"=>3,"name"=>"Saab"),
				  array("id"=>4,"name"=>"Land Rover"),
				  array("id"=>5,"name"=>"Skoda"),
				  array("id"=>6,"name"=>"Rolls Royce"),
				  array("id"=>7,"name"=>"Audi")
				);
		 ?>
		 <select id="cars" name="cars[]" multiple class="form-control" >
		 <?php foreach($cars as $val){?>
			<option value="<?php echo $val['id'];?>"><?php echo $val['name'];?></option>
		 <?php } ?>
		 </select>
		</div>
		<div class="form-group">
		 <input type="submit" class="btn btn-info" name="submit" value="Submit" />
		</div>
	</div>
   </form>
  </div>

<h2 align="center">Multiselect Dropdown With Checkbox In Php</h2>

</div>

<label>Select Cars:</label><br/>

<?php

$cars = array (

array("id"=>1,"name"=>"Volvo"),

array("id"=>2,"name"=>"BMW"),

array("id"=>3,"name"=>"Saab"),

array("id"=>4,"name"=>"Land Rover"),

array("id"=>5,"name"=>"Skoda"),

array("id"=>6,"name"=>"Rolls Royce"),

array("id"=>7,"name"=>"Audi")

);

<?php foreach($cars as $val){?>

<?php } ?>

</select>

</div>

</div>

</form>

</div>

Implement Multiselect Dropdown Checkbox

Now we will implement multiselect dropdown checkbox using jquery. so you can see the below example.

 $('#cars').multiselect({
  nonSelectedText: 'Select Cars',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });

$('#cars').multiselect({

nonSelectedText: 'Select Cars',

enableFiltering: true,

enableCaseInsensitiveFiltering: true,

buttonWidth:'400px'

});

index.php

<!DOCTYPE html>
<html>
 <head>
  <title>Multiselect Dropdown With Checkbox In Php - XpertPhp</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <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" />
 </head>
 <body>
  <div class="container">
   <h2 align="center">Multiselect Dropdown With Checkbox In Php</h2>
   <form method="post" id="cars_form" name="cars_form">
    <div class="col-md-3">
    </div>
	<div class="col-md-7">	
		<div class="form-group">
		 <label>Select Cars:</label><br/>
		 <?php
				$cars = array (
				  array("id"=>1,"name"=>"Volvo"),
				  array("id"=>2,"name"=>"BMW"),
				  array("id"=>3,"name"=>"Saab"),
				  array("id"=>4,"name"=>"Land Rover"),
				  array("id"=>5,"name"=>"Skoda"),
				  array("id"=>6,"name"=>"Rolls Royce"),
				  array("id"=>7,"name"=>"Audi")
				);
		 ?>
		 <select id="cars" name="cars[]" multiple class="form-control" >
		 <?php foreach($cars as $val){?>
			<option value="<?php echo $val['id'];?>"><?php echo $val['name'];?></option>
		 <?php } ?>
		 </select>
		</div>
		<div class="form-group">
		 <input type="submit" class="btn btn-info" name="submit" value="Submit" />
		</div>
	</div>
   </form>
   <br />
  </div>
 </body>
</html>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://xpertphp.com/php-ajax-update-data-in-mysql-by-using-bootstrap-modal/" target="_blank" rel="nofollow" class="u3f8b9fc5bf11fa04e074a9aa79e94209"><style>.u3f8b9fc5bf11fa04e074a9aa79e94209{padding:0;margin:0;padding-top:1em!important;padding-bottom:1em!important;width:100%;display:block;font-weight:700;background-color:#eaeaea;border:0!important;border-left:4px solid #34495E!important;box-shadow:0 1px 2px rgba(0,0,0,.17);-moz-box-shadow:0 1px 2px rgba(0,0,0,.17);-o-box-shadow:0 1px 2px rgba(0,0,0,.17);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.17);text-decoration:none}.u3f8b9fc5bf11fa04e074a9aa79e94209:active,.u3f8b9fc5bf11fa04e074a9aa79e94209:hover{opacity:1;transition:opacity 250ms;webkit-transition:opacity 250ms;text-decoration:none}.u3f8b9fc5bf11fa04e074a9aa79e94209{transition:background-color 250ms;webkit-transition:background-color 250ms;opacity:1.11;transition:opacity 250ms;webkit-transition:opacity 250ms}.u3f8b9fc5bf11fa04e074a9aa79e94209 .ctaText{font-weight:700;color:#464646;text-decoration:none;font-size:16px}.u3f8b9fc5bf11fa04e074a9aa79e94209 .postTitle{color:#000;text-decoration:underline!important;font-size:16px}.u3f8b9fc5bf11fa04e074a9aa79e94209:hover .postTitle{text-decoration:underline!important}</style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">See also</span>  <span class="postTitle">PHP Ajax Update Data in MySQL By Using Bootstrap Modal</span></div></a></div>
<script>
$(document).ready(function(){
 $('#cars').multiselect({
  nonSelectedText: 'Select Cars',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });
 
 $('#cars_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"insert.php",
   method:"POST",
   data:form_data,
   success:function(data)
   {
    $('#cars option:selected').each(function(){
     $(this).prop('selected', false);
    });
    $('#cars').multiselect('refresh');
    alert(data);
   }
  });
 });
 
 
});
</script>

<!DOCTYPE html>

<html>

<head>

<title>Multiselect Dropdown With Checkbox In Php - XpertPhp</title>

</head>

<body>

<h2 align="center">Multiselect Dropdown With Checkbox In Php</h2>

</div>

<label>Select Cars:</label><br/>

<?php

$cars = array (

array("id"=>1,"name"=>"Volvo"),

array("id"=>2,"name"=>"BMW"),

array("id"=>3,"name"=>"Saab"),

array("id"=>4,"name"=>"Land Rover"),

array("id"=>5,"name"=>"Skoda"),

array("id"=>6,"name"=>"Rolls Royce"),

array("id"=>7,"name"=>"Audi")

);

<?php foreach($cars as $val){?>

<?php } ?>

</select>

</div>

</div>

</form>

<br />

</div>

</body>

</html>

$(document).ready(function(){

$('#cars').multiselect({

nonSelectedText: 'Select Cars',

enableFiltering: true,

enableCaseInsensitiveFiltering: true,

buttonWidth:'400px'

});

$('#cars_form').on('submit', function(event){

event.preventDefault();

var form_data = $(this).serialize();

$.ajax({

url:"insert.php",

method:"POST",

data:form_data,

success:function(data)

{

$('#cars option:selected').each(function(){

$(this).prop('selected', false);

});

$('#cars').multiselect('refresh');

alert(data);

}

});

</script>

Get Selected Values on Form Submit

Now finally When the user submits the form then data will be inserted into the database.
insert.php

<?php 
$connect = mysqli_connect("localhost", "root", "", "testdb");

if(isset($_POST["cars"]))
{
 if(count($_POST["cars"])>1){
	$cars = implode(",",$_POST["cars"]);
 }else{
	 $cars = $_POST["cars"][0];
 }
 $query = "INSERT INTO cars(car_id) VALUES('".$cars."')";
 if(mysqli_query($connect, $query))
 {
  echo 'Data Inserted';
 }
}
else{
	echo "Please Choose any cars";
}
?>

<?php

$connect = mysqli_connect("localhost", "root", "", "testdb");

if(isset($_POST["cars"]))

{

if(count($_POST["cars"])>1){

$cars = implode(",",$_POST["cars"]);

}else{

$cars = $_POST["cars"][0];

}

$query = "INSERT INTO cars(car_id) VALUES('".$cars."')";

if(mysqli_query($connect, $query))

{

echo 'Data Inserted';

}

else{

echo "Please Choose any cars";

}

Download