Open In App

jQuery multiple select plugin for Bootstrap

Improve
Improve
Like Article
Like
Save
Share
Report

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=
      </script
      <link href=
            rel="stylesheet"
      <script src=
      </script>
      <script src=
      </script
      <link href=
      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


Last Updated : 17 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads