jQuery multiple select plugin for Bootstrap - GeeksforGeeks

17 Aug, 2021
jQuery provides a variety of plugins for bootstrap for distinctive purposes which can be easily integrated into a web application, making the websites and applications look more attractive and reliable. 
Plugins can be included in two ways i.e. individually by using Bootstrap’s individual *.js files, or all at once, utilizing bootstrap.js.
Bootstrap multiselect is also one of the jQuery plugins for Bootstrap, which enables the client to choose more than one alternative from a dropdown list, at once. Utilizing the multiple select plugins, dropdown alternatives act as checkboxes, so that the client can choose multiple alternatives, unlike normal dropdown where only one alternative can be chosen. The plugin is based on the Twitter Bootstrap system and comes with numerous features. In runtime, simple HTML select can be effortlessly changed into a Bootstrap button by utilizing the same.
You need to add the following resources to your HTML file to use the bootstrap multiple select jQuery plugin in your website.
Stylesheet to enable the alternatives to be opened as a dropdown.
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet”>
Include Bootstrap and jQuery files as scripts.
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
Bootstrap CDN links to enable the multi-select feature in the dropdown list.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js”> </script> <link href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css” rel=”stylesheet” >
Now create an HTML dropdown with a list of alternatives.
<select id=”checkboxes” multiple=”multiple”> <option value=”Array”>Array</option> <option value=”Linked list”>Linked list</option> <option value=”Strings”>Strings</option> <option value=”Stack”>Stack</option> <option value=”Queue”>Queue</option> <option value=”Graph”>Graph</option> <option value=”Tree”>Tree</option> <option value=”Maps”>Maps</option> </select>
And don’t forget to initialize the plugin by calling the multiselect() function.
$(‘#checkboxes’).multiselect(); 
After initializing the plugin, the selected dropdown component ($(‘#checkboxes’)) will be replaced with a bootstrap button that shows available options with checkboxes.
Example:
HTML
<html>   <head>       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">      </script>       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"            rel="stylesheet" >       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">      </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js">      </script>       <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"      rel="stylesheet">       <style>         .container        {             margin-top: 30px;             color: green;             font-size: 20px;        }        </style>  </head>      <body>     <br>    <p class="container"><b>GeeksforGeeks</b></p>      <div  class="container">         <b>Select your choice:</b>         <select id="checkboxes" multiple="multiple">            <option value="Linked list">Linked list</option>                   <option value="Array">Array</option>                        <option value="Strings">Strings</option>               <option value="Stack">Stack</option>             <option value="Queue">Queue</option>            <option value="Graph">Graph</option>             <option value="Tree">Tree</option>            <option value="Maps">Maps</option>        </select>     </div>          <script>         $(document).ready(function() {             $('#checkboxes').multiselect();         });     </script>       </body> </html>
Output: Now, as you can see in the output, a multi-select dropdown list is created where the client can choose multiple alternatives at once, by utilizing the multiple select plugins, integrated by following the above steps.
supported browser:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
ysachin2314
HTML-Basics
jQuery-Plugin
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?