Multi Select Dropdown with Checkbox using Bootstrap, jQuery and PHP

In many web applications, we need to implement dropdown list with checkboxes to enable users to select multiple options at the same time. So in this tutorial, you will learn how to implement multi select dropdown with checkbox using Bootstrap. In this tutorial, we will use bootstrap-multiselect.js jQuery Bootstrap plugin to create checkboxes with dropdown list. We will also handle form submit to PHP script to get selected checkbox values.


So let’s start the coding. Before begin, take a look at major files used for this tutorial.

• index.php


• action.php


• script.js

Step1: Include Bootstrap, jQuery and Plugin Files
As in this tutorial we have created HTML using Bootstrap, so we need to include Bootstrap, jQuery and Plugin files in head tag in index.php.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<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">
<script src="script.js"></script>


Step2: Create Drop Down List HTML

Now we will create Dropdown list HTML in index.php. To create multiple select dropdown list, we are using bootstrap-multiselect.js and it needs to add multiple attribute in select tag to create checkbox with each option. The multiple options can be selected by mouse or by holding down the control (ctrl) key.

<div class="container">
<h2>Example: Multi Select Dropdown with Checkbox using Bootstrap, jQuery and PHP</h2>
<form class="form-signin" method="post" id="register-form" action="action.php">
<div class="form-group">
<select id="languages" name="languages[]" multiple >
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="c">C</option>
<option value="sql">SQL</option>
<option value="ruby">Ruby</option>
<option value=".net">.Net</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">Submit</button>
</div>
</form>
</div>



Step3: Create Multi Select List with Bootstrap Select Plugin
Now in script.js, we will create dropdown list as multi select dropdown list using Bootstrap Multi Select plugin.

$(document).ready(function() {
$('#languages').multiselect({
nonSelectedText: 'Select Language'
});
});

We have used nonSelectedText property of Bootstrap multiselect plugin to display text in dropdown list when no option selected. There are many useful properties given in plugin documentation. You can try these to implement in your application to make you dropdown list more user friendly.

Step4: Get Selected Values on Form Submit
Finally in action.php, we will get selected checkbox values on form submit to implement functionality.

<?php
print_r ($_POST['languages']); ?>
?>


You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]