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

  • 16807

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:

Tips

First create a Database (students) on your local server or hosting server.

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';
 }
}
?>
Tags:
Varun Singh
Varun Singh

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Insta, LinkedIn and Twitter.
I need your support to continue.