jQuery multiple select plugin for Bootstrap

Last Updated : 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

jQuery multiple select plugin for Bootstrap

bhawnaatrish

Improve

Article Tags :

jQuery multiple select plugin for Bootstrap

Similar Reads

Thank You!

What kind of Experience do you want to share?