Multi Select Dropdown List with Checkbox In jQuery

Multi Select Dropdown List with Checkbox In jQuery .

Multi Select Dropdown List with Checkbox In jQuery
Multi Select Dropdown List with Checkbox In jQuery

Multiselect dropdown is incredibly helpful to permit the user to pick out multiple choices in a select box. There are two ways to select multiple choices in a dropdown. The first one is a hold down the control(CTRL) button of the keyboard and the second one is, use jQuery to create a dropdown with a checkbox so the user can select multiple options in a select box. Later one is more user friendly and it makes web application more impressive.

So In this post, I will explain about jQuery Multiselect dropdown list with checkbox using bootstrap multiselect plugin. Bootstrap Multiselect is a JQuery based plugin that converts a simple dropdown list to multiple select dropdown with checkboxes.

Step 1: Add Below CSS and JS.

  <head>      
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
   </head>

Step 2: Add Below HTML code.

 <body><center>
        <select name="skills[]" multiple id="skills">
            <option value="Angular">Angular</option>
            <option value="React">React</option>
            <option value="VueJS">VueJS</option>
            <option value="Laravel">Laravel</option>
            <option value="JavaScript">JavaScript</option>
            <option value="Codeigniter">Codeigniter</option>
            <option value="PHP">PHP</option>
            <option value="Python">Python</option>
            <option value="Android">Android</option>
            <option value="iOS">iOS</option>
            <option value="HTML">HTML</option>
            <option value="XML">XML</option>
            <option value="MySql">MySql</option>
            <option value="PostgreSql">PostgreSql</option>
        </select>
    </body>

Step 3: Add the Below script.

<script>
    $('#skills').multiselect({
          columns: 1,
          placeholder: 'Select Your Skills',
          search: true,
            includeSelectAllOption: true,
        });
</script>

Multi Step Form with Progress Bar Using jQuery

Related Posts