Bootstrap Multiselect Dropdown
Bootstrap Multiselect is a jQuery based plugin that allows users to select multiple options from dropdown list. Create multiple select dropdown list box 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.
- bootstrap-multiselect.css
- bootstrap-multiselect.js
HTML
<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>JavaScript
<script type="text/javascript">
$(document).ready(function() {
$('#demo').multiselect();
});
</script>Example
<!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="bootstrap.min.css">
<link rel="stylesheet" href="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="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#demo').multiselect();
});
</script>
</body>
</html>jQuery Multiple Select Plugin For Bootstrap Bootstrap Multiselect
You can customize this code further as per your requirement.