Date:

Share:

Multi Select Dropdown List with Checkbox In jQuery .

Related Articles

The Multiselect drop-down menu is incredibly useful to allow the user to select multiple options in a selection box. There are two ways to select multiple options in the drop-down menu. The first is a long press on the control button (CTRL) of the keyboard and the second is, use jQuery to create a drop-down menu with a check box so that the user can select multiple options in a selection box. Later one is more user friendly and it makes the web application more impressive.

So in this post, I will explain the jQuery Multiselect drop-down list with a checkbox using the bootstrap multiselect plugin. Bootstrap Multiselect is a JQuery-based plugin that converts a simple drop-down list to a drop-down menu with multiple selections 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 HTML code below.

 <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 script below.

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

Multi-step form with a progress bar using jQuery

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular Articles