Multi Select Dropdown with Checkbox using Jquery in PHP with Bootstrap.

In this post we are going to discuss how to create multiple select dropdown with checkbox select option by using Bootstrap Multiselect plugin. Multiselect Dropdown that allows the user to type or select multiple values from a list of predefined options.

So here you will make simple application in PHP for inserting the value of this multiple selected option so we can understand how to use this type of multiple select option with PHP for make real type of web application.

Output:

multi select dropdown checkbox

Implementation of code:

skills-table.sql: Import this file in database to create skills table in students database . Or you can create manually skills table in students datebase. Here is the code of this file.

MySql Script to create skills Table:

CREATE TABLE `skills` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `skills` varchar(300),
   PRIMARY KEY (id)
);

index.php

This file is used to display UI of Dropdown Select Box.

<!DOCTYPE html>
<html>
<head>

<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" />

</head>

<body> 
<form method="post" id="prim_skills_form">

<label>Select Skills</label>
<select id="prim_skills" name="prim_skills[]" multiple >
<option value="java">java</option>
<option value="Php">Php</option>
<option value="Python">Python</option>
<option value="Angular">Angular</option>
<option value="Java Script">Java Script</option>
<option value="Css">Css</option>
<option value="React">React</option>
<option value=".Net">.Net</option>
</select>

<input type="submit" class="btn btn-info" name="submit" value="Submit" />

</form>
</body>

<script>
$(document).ready(function(){
$('#prim_skills').multiselect({
nonSelectedText: 'Select Your Skills',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth:'400px'
});

$('#prim_skills_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#prim_skills option:selected').each(function(){
$(this).prop('selected', false);
});
$('#prim_skills').multiselect('refresh');
alert(data);
}
});
});


});
</script>

</html>

insert.php:

This file is used to insert selected options in table.

<?php 
$connect = mysqli_connect("localhost", "root", "", "database_name");
if(isset($_POST["prim_skills"]))
{
 $prim_skills = '';
 foreach($_POST["prim_skills"] as $row)
 {
  $prim_skills .= $row . ', ';
 }
 $prim_skills = substr($prim_skills, 0, -2);
 $query = "INSERT INTO skills(skills) VALUES('".$prim_skills."')";
 if(mysqli_query($connect, $query))
 {
  echo 'Data Inserted';
 }
}
?>