• Seo Expert
  • Khaali Paper

Bootstrap Multiselect Dropdown

Bootstrap Multiselect is a jQuery based plugin that allows users to select multiple options from dropdown list. Create multiple select dropdown listbox with checkbox select option by using Bootstrap Multiselect. Example of Multiselect Dropdown using HTML, CSS, Javascript and jQuery.

There are Two External files are required.

  1. bootstrap-multiselect.css
  2. bootstrap-multiselect.js
  • Html
  • Javascript
  • Example
<select id="demo" multiple="multiple">
  <option value="Javascript">Javascript</option>
  <option value="Python">Python</option>
  <option value="LISP">LISP</option>
  <option value="C++">C++</option>
  <option value="jQuery">jQuery</option>
  <option value="Ruby">Ruby</option>
</select>
<script type="text/javascript">
  $(document).ready(function() {
    $('#demo').multiselect();
  });
</script>
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Title</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://khaalipaper.com/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://khaalipaper.com/source/bootstrap-multiselect.css" type="text/css">
  </head>
  <body>
  <main>
  <section>
    <select id="demo" multiple="multiple">
      <option value="Javascript">Javascript</option>
      <option value="Python">Python</option>
      <option value="LISP">LISP</option>
      <option value="C++">C++</option>
      <option value="jQuery">jQuery</option>
      <option value="Ruby">Ruby</option>
    </select>
  </section>
  </main>
  <script src="http://khaalipaper.com/js/jquery-3.2.1.min.js"></script>
  <script src="http://khaalipaper.com/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="http://khaalipaper.com/source/bootstrap-multiselect.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#demo').multiselect();
    });
  </script>
  </body>
  </html>

Multiselect Dropdown

You can customize this code further as per your requirement.