Multi Select Dropdown with checkboxes using jQuery in PHP
In this article we will explain you How to implement multi select drop-down with checkbox using jQuery in PHP. Multi select dropdown is very useful to allow to user select multiple options in a checkbox. we can use jQuery to make the multi-select dropdown more user-friendly and add the checkbox to each option in the multi-select dropdown.
MultiSelect is a JQuery plugin that turns a multi-select list into a beautiful and easy-to-use checkbox drop-down list. This library is the very simple to change the view of checkbox elements and create a multi-select field with a checkbox.
See also
jQuery MultiSelect Plugin
we will the MultiSelect plugin to implement multi select drop-down with checkbox using jQuery.
Include MultiSelect plugin and jQuery plugin CDN link
<!-- Latest compiled and minified multiselect CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<!-- Latest compiled and minified Jquery cdn library -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" ></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>
<!-- Latest multi-select js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>Implement Multiselect Dropdown Checkbox
Now we will code for the multi-select option using multi-select and jQuery plugin. In multi select checkbox option there are many Configuration Options you can change in your requirement.
<script type="text/javascript">
$(document).ready(function() {
$('#category').multiselect({
includeSelectAllOption: true,
selectAllText: 'All Category'
});
});
</script>Create HTML Page with Dropdown List
In this page we will fetch category record from to database and display on the select option to show multi-select options. And show another select option for product record to insert into the database using PHP with mysqli.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi select Dropdown List with Checkbox using jQuery</title>
<!-- Latest compiled and minified multiselect CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" >
</head>
<body>
<div class="container" style="margin-top: 50px;">
<div class="row">
<h1 class="text-success text-center">How to Multi select Dropdown List with Checkbox using PHP</h1>
<div class="col-md-3"></div>
<div class="col-md-6" style="margin-top: 50px;">
<?php
if (!empty($_GET['message'])) {
echo "<div class='alert alert-success'>".$_GET['message']."</div>";
}
?>
<form action="submit.php" method="POST">
<div class="form-group">
<label class="form-label" for="category">Select Category</label>
<select type="select" name="category[]" class="form-control" id="category" multiple="multiple">
<?php
// Include Configuration File
include_once "config.php";
$query = "SELECT * FROM categories WHERE status = '1'";
$result = $con->query($query);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<option value="<?php echo $row['id'] ?>"><?php echo $row['category_name'] ?></option>
<?php
}
}
?>
</select>
</div>
<div class="form-group">
<label class="form-label" for="product">Product name</label>
<select type="select" name="product" class="form-control">
<option value="">Select Product</option>
<?php
$query = "SELECT * FROM products WHERE status = '1'";
$result = $con->query($query);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<option value="<?php echo $row['id'] ?>"><?php echo $row['product_name'] ?></option>
<?php
}
}
?>
</select>
</div>
<button type="submit" name="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</body>
<!-- Latest compiled and minified Jquery cdn library -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" ></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>
<!-- Latest multi-select js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#category').multiselect({
includeSelectAllOption: true,
selectAllText: 'All Category'
});
});
</script>
</html>Create Database and Table by SQL query
In this file We will explain you how to create database and table using sql query. I created webscodex database and table. categories table holds the records which will be save in categories table and create drop down list options fetch data from database. You can simply create table as following SQL query.
-- Database: `webscodex`
-- --------------------------------------------------------
-- Table structure for table `categories`
--
CREATE TABLE `categories` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`category_name` varchar(50) NOT NULL,
`status` tinyint(4) NOT NULL,
`created_at` datetime NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
--
-- Dumping data for table `categories`
--
INSERT INTO `categories` (`id`, `category_name`, `status`, `created_at`) VALUES
(1, 'Fashion', 1, '2023-07-31 23:56:49'),
(2, 'Mobiles', 1, '2023-07-31 23:56:49'),
(3, 'Electronics', 1, '2023-07-31 23:56:56'),
(4, 'Home & Furniture', 1, '2023-07-31 23:56:56'),
(5, 'Grocery', 1, '2023-07-31 23:58:39'),
(6, 'Appliances', 1, '2023-07-31 23:58:39'),
(7, 'Beauty & Toys', 1, '2023-07-31 23:58:57'),
(10, 'Movies & Music', 1, '2023-08-01 15:23:05'),
(11, 'Movies & Music', 0, '2023-08-01 15:23:16'),
(12, 'Movies & Music', 0, '2023-08-01 15:24:00');
-- --------------------------------------------------------
--
-- Table structure for table `products`
--
CREATE TABLE `products` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`product_name` varchar(100) NOT NULL,
`image` varchar(100) NOT NULL,
`description` text NOT NULL,
`price` int(50) NOT NULL,
`status` tinyint(4) NOT NULL,
`created` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-- Dumping data for table `products`
--
INSERT INTO `products` (`id`, `product_name`, `image`, `description`, `price`, `status`, `created`) VALUES
(1, 'HP Windows 11 All-in-One 12th Gen', '41HPbhGPHzS.JPG', 'HP Windows 11 All-in-One 12th Gen Intel Core i3-27inches 68.6 cm 8GB RAM/512GB SSD/FHD, Micro-Edge, Anti-Glare Display/Wireless Keyboard & Mouse/Intel UHD Graphics/Win 11/MSO 2021, 27-cb1345in', 64, 1, '2023-07-29 16:01:10'),
-- --------------------------------------------------------
-- Table structure for table `product_category_map`
--
CREATE TABLE `product_category_map` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`product_id` int(50) NOT NULL,
`category_id` int(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
--
-- Dumping data for table `product_category_map`
--
INSERT INTO `product_category_map` (`id`, `product_id`, `category_id`) VALUES
(1, 1, 1),
(2, 1, 2),
(3, 1, 3),
(4, 1, 1),Create Database Connection
In this step, we require to create database connection, here we will set database name, username and password. So let’s create config.php file on your project and put bellow code:
<?php
// Database configuration
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "webscodex";
// Create database connection
$con = new mysqli($hostname, $username, $password, $dbname);
// Check connection
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
?>Multi Select Checkbox Value Save in PHP
In This file we will save to the multi select checkboxes value into the table. which is given on the query table.
See also Insert multiple checkbox value using jQuery AJAX in PHP MySql
submit.php
<?php
// Include Configuration File
include_once "config.php";
if (isset($_POST['submit'])) {
$categoryIds = $_POST['category'];
$product = $_POST['product'];
$error = false;
foreach ($categoryIds as $categoryId) {
$query = "INSERT INTO `product_category_map`(`product_id`, `category_id`) VALUES ('$product','$categoryId')";
$con->query($query);
$error = true;
}
if ($error) {
$message = "Category add successful";
header("Location: index.php?message=".$message."");
}else{
$message = "Category does not addedd please try again!";
header("Location: index.php?message=".$message."");
}
}
?>click on the link to more details
https://webscodex.com/multi-select-dropdown-with-checkboxes-using-jquery-in-php/
Conclusion
In this article, I have explain the process of How to create Multi select Drop down checkbox list using jQuery with PHP. I have tried to very simple way to implement multi select dropdown checkbox list and insert into database table. You can easily extend the functionality according to your needs.