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>

curd.php:

This file is used to check product was already added or remove from session.

<?php
  
  session_start();

	if(!isset($_REQUEST['pid'])){
		
		exit();
    }
 
    $pid = $_REQUEST['pid'];
	
	$pname = $_REQUEST['p'];

	$case = $_REQUEST['action'];


    // Check if session varible is set or not
	
	if(!isset($_SESSION['cart'])){

        $_SESSION['cart'] = array();

        }

    switch($case):

    case 'add':

        // Now check if product is already stored in session variable

    if(in_array($pid, $_SESSION['cart'])){

       // redirect to product list and tell the user it was added to cart

    header('Location: index.php?msg=exists&id=' . $pid . '&p=' . $pname);

    }

    else{

        if(!preg_match('/^[0-9]{1,}$/i', $pid)){

            header('Location: index.php?msg=exists&id' . $pid . '&p=' . $pname);

        }else{

             array_push($_SESSION['cart'], $pid);        

              // redirect to product list and tell user it was added to cart


            header('Location: index.php?msg=add&id' . $pid . '&p=' . $pname);

            }

        }
    break;

case 'remove':

	if(!preg_match('/^[0-9]{1,}$/i', $pid)){

		header('Location: index.php?msg=exists&id' . $pid . '&p=' . $pname);

        }else{

             $_SESSION['cart'] = array_diff($_SESSION['cart'], array($pid));

               // redirect to product list and tell the user it was removed from cart

             header('Location: cart.php?msg=removed&id=' . $id . '&p=' . $pname);


                              }
break;

endswitch;
?>