In this post we are going to discuss how to create multiple select dropdown listbox with checkbox select option by using Bootstrap Multiselect plugin. In one of the previous post we have already made discussion on multiple select dropdown list by using Bootstrap plugin, but in that plugin there is no functionality of checkbox option select. If you have use this plugin for make multiple select dropdown list then for select multiple option there is checkbox, so by check checkbox we can select multiple option from dropdown list box.
In this post we will discuss how to use this Bootstrap Multiselect plugin for make multiple select option with checkbox in dropdown list box. So we 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.
For called this plugin we have use multiselect() method, by using this method we can called this plugin in jquery. In this method there is many option are available to make multi select checkbox option dropdown as per our requirement. For example suppose you want to enable search filter into your dropbox then you have to add enableFiltering option into your method with true. So this plugin will search textbox into your dropdown listbox. So you can easily search your option by writing query into textbox.
If you have developed any web application and in which you want to required user can select multiple option from dropdown, so if you have use simple select box with multiple attribute, then user can select multiple option, but your form user interface will not be attractive and user will face problem to select multiple option. But suppose you have use this plugin then user can easily understand regarding he can select multiple option from list of option. Here we will seen simple example with this type of multi select dropdown list box. We will insert value of multi select dropdown by using Ajax JQuery with PHP.
Source Code
index.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</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>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</h2>
<br /><br />
<form method="post" id="framework_form">
<div class="form-group">
<label>Select which Framework you have knowledge</label>
<select id="framework" name="framework[]" multiple class="form-control" >
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Laravel">Laravel</option>
<option value="YII">YII</option>
<option value="Zend">Zend</option>
<option value="Symfony">Symfony</option>
<option value="Phalcon">Phalcon</option>
<option value="Slim">Slim</option>
</select>
</div>
<div class="form-group">
<input type="submit" class="btn btn-info" name="submit" value="Submit" />
</div>
</form>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#framework').multiselect({
nonSelectedText: 'Select Framework',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth:'400px'
});
$('#framework_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#framework option:selected').each(function(){
$(this).prop('selected', false);
});
$('#framework').multiselect('refresh');
alert(data);
}
});
});
});
</script>
insert.php
<?php
//insert.php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["framework"]))
{
$framework = '';
foreach($_POST["framework"] as $row)
{
$framework .= $row . ', ';
}
$framework = substr($framework, 0, -2);
$query = "INSERT INTO like_table(framework) VALUES('".$framework."')";
if(mysqli_query($connect, $query))
{
echo 'Data Inserted';
}
}
?>
Thank you for tutorial,
ReplyDeleteWell, how do I load the data from the database to the selection menu
Thank you
Hello,
ReplyDeleteHow to update?
Thank you
Thanks for sharing nice video
ReplyDeleteVery nice i llove it all you post thank you sir
ReplyDeletehow to use dynamic data?
ReplyDeleteI really like this lesson but i hope so you could also teach us how to select multiple data in another table using ID. That would really help me a lot as a student. I would really appreciate any response. Thank you
ReplyDeletehow we can make it dynamic dropdown list
ReplyDeletei did not select any dropbox but pop up message data inserted still popped out
ReplyDeletehow to use this for only one
ReplyDeletei used this but that doesnt worked out.,
$sql_query1 = "INSERT INTO movies_info (`movie_name`,`movie_image`,`movie_description`,`movie_trailer`,`release_date`,
`release_year`,`movie_genre`,`movie_rating`,`movie_country`,`is_featured`)
VALUES('$movie_name','$target','$movie_description','$movie_trailer','$release_date',
'$release_year','".$movie_genre."','$movie_rating','$movie_country','$is_featured')";
It's really helpful thanks
ReplyDeleteExcellent guide!
ReplyDeletebut if I also wanted to read from the database and change the information?
Can you help me?
will this work for angular 2 ?
ReplyDeleteit helps me alot thanks for helping others
ReplyDeleteThank you!
ReplyDeleteThank you!
ReplyDeleteAwesome..Great work Thank you and awaiting for further developement exercises..have a nice day..
ReplyDeletewill you please provide the sql file...
ReplyDeleteThank you! and awaiting for further developement exercises.
ReplyDeleteThanks
ReplyDeleteHai, I have tried the code in my project doing as a codeignitor one. I have placed the links for js and css in a file called header.php, The dropdown list is coded in another page. When run the web page, the nonSelectedText and checkboxes aren't displayed. I Just copied the entire code in an html page it runs perfectly. Why php code doesn't displays the dropdown correctly. Give a solution. Whether the problem is because of links is written in the another page
ReplyDeleteThank you
ReplyDeletehow to upload 2 selected options ? the sample is
ReplyDelete1. option select name teacher
2. option select name student
2 options that excute in one insert.php and 1 row of database ?
can u help ?
Thanku sir,,,
ReplyDeleteThank you so much...
ReplyDeleteReally appreciated that you shared the source code...
it works! thank you. but how to make if there is multiple question?
ReplyDeleteHi... How to refill the select with previously selected records but from the database
ReplyDeleteFirst of all thanks for such excellent stuff, Will you please explain me how to show selected options?
ReplyDeleteThanks for this excellent stuff, will you please explain me how to show selected options?
ReplyDeletethanks you for your help..god bless you
ReplyDeletei want to use this code but i want to change it so that the drop down menu fetches data from a table in my database and displays it on my dropdown menu and once i select it i can insert the selection into ANOTHER table
ReplyDeletecon you please help me with that??
I tried but not working
ReplyDeleteNot Working Show undefined multiselect
ReplyDeletegoods
ReplyDelete