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>