Multi Select Dropdown List with Checkbox In jQuery .

rajeshSeptember 22, 2021

0 2,196 1 minute read

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

rajeshSeptember 22, 2021

0 2,196 1 minute read