Turn a Bootstrap Dropdown into Multi-Select Button using jQuery

The dropdown-checkboxes plug-in

The jQuery dropdown-checkboxes plug-in will turn a Bootstrap select dropdown into the multi-select input button where options are available with checkboxes.

This is a compact dropdown/button and a user may select one or more options by ticking the checkboxes. The selected checkbox/option values are stored in a hidden input field.

Developer’s page Download plug-in

Install the dropdown-checkboxes plug-in?

After downloading the plug-in, place its CSS file along with jQuery and Bootstrap CSS in the <head> section:

 <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>

<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css”>

<link rel=”stylesheet” href=”css/dropdownCheckboxes/dropdownCheckboxes.min.css”>

(Size-wise, it is only useful if you already using the jQuery and Bootstrap in your project)

The markup:

Use the markup for the button and checkboxes as shown in the demo code below.

Initialize the plug-in


A demo of creating button dropdown

See the demo by clicking the link or image below. You can see a button with pre-selected values (jQuery, JavaScript, CSS). Press it and open the dropdown. There, you can see various options with checkboxes. The selected values are shown on top:

jQuery bootstrap dropdown buttonThe markup starts with the button tag followed by checkboxes with labels:

<!DOCTYPE html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/dropdownCheckboxes/dropdownCheckboxes.min.css">
color: #fff;
<div class='container'>


<form class='myform'>

<div class="dropdown cq-dropdown" data-name='statuses'>
<button class="btn btn-info btn-sm dropdown-toggle" type="button" id="btndropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Your Expertise
<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="btndropdown">
<label class="radio-btn">
<input type="checkbox" value='jQuery' checked>
<label class="radio-btn">
<input type="checkbox" value='Bootstrap'>
<label class="radio-btn">
<input type="checkbox" value='HTML'>
<label class="radio-btn">
<input type="checkbox" value='JavaScript' checked>
<label class="radio-btn">
<input type="checkbox" value='CSS' checked>
<li class='text-center'>
<button type='button' class='btn btn-xs btn-danger clear close-dropdown' value='Clear'>Clear</button>
<button type='button' class='btn btn-xs btn-success save' value='Save'>Save</button>



<button type='button' class='btn btn-default btn-sm' onClick=" console.log( $('.myform').serialize() ) ">
Console log current form values



<script src="js/dropdownCheckboxes/dropdownCheckboxes.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


Copy/paste the above code in your editor.

How to retrieve selected data?

After the selection are made and data is saved in the form where this plug-in is used, the selected values can be retrieved as follows.

  • In the markup, the data-name attribute is used in the top div wrapper. After the plug-in is initiated, a hidden input field with the name of that data-name’s value is created.
  • As the values are saved after ticking the checkboxes in button dropdown, the value of the hidden input field is set to a JSON array.

Learn more about this plug-in by visiting the developer’s page.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️