Updated June 28, 2023
Definition of Bootstrap Multiselect
Bootstrap Multiselect is a plugin that selects multiple options in the dropdown list. It is an advanced plugin allowing users to select many options from the dropdown list as required. It makes a single dropdown list to select multi options using a checkbox for web application visitors. The bootstrap Multiselect needed bootstrap and jquery methods for space and memory saving in bootstrap web applications. This component allows the visitor to interconnect with the application and user with minimum space.
Syntax:
- This needs a bootstrap class and tag with the jquery method.
- The bootstrap dropdown list for Multiselect syntax is below.
<select id = "id-name" multiple = "multiple">
<option value = "Bootstrap"> Bootstrap </option>
<option value = "Angular"> Angular </option>
<option value = "JavaScript"> JavaScript </option>
<option value = "jquery"> jquery </option>
</select>- The jquery method for Multiselect syntax is below.
<script>
$(document).ready(function() {
$('#id-name').multiselect();
});
</script>How does Multiselect Function work in Bootstrap?
- The bootstrap supporting file was added in the head section of the HTML page.
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>- It is supporting the scripting and styling file added in the head section of the HTML page.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js">
</script>
<link rel= "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>- The bootstrap dropdown list for multi-select syntax is used in the body section of the web pages.
<select id = "id-name" multiple = "multiple">
<option value = "Bootstrap"> Bootstrap </option>
<option value = "Angular"> Angular </option>
<option value = "JavaScript"> JavaScript </option>
<option value = "jquery"> jquery </option>
</select>- The jquery method for Multiselect syntax is used in the body or head section of the html page.
<script>
$(document).ready(function() {
$('#id-name').multiselect();
});
</script>- The working procedure steps are combined together.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js">
</script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect</h2>
<select id = "mltislct" multiple = "multiple">
<option value = "Bootstrap"> Bootstrap </option>
<option value = "Angular"> Angular </option>
<option value = "JavaScript"> JavaScript </option>
<option value = "jquery"> jquery </option>
</select>
</div>
<script>
$(document).ready(function() {
$('#mltislct').multiselect();
});
</script>
</body>
</html>Examples
Lets us discuss examples of Bootstrap Multiselect.
Example #1
The basic Bootstrap Multi-Select example and output
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js">
</script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>
</head>
<body>
<div class = "container">
<h2> Bootstrap Multiselect </h2>
<select id = "mltislct" multiple = "multiple">
<option value = "Bootstrap"> Bootstrap </option>
<option value = "Angular"> Angular </option>
<option value = "JavaScript"> JavaScript </option>
<option value = "jquery"> jquery </option>
</select>
</div>
<script>
$(document).ready(function() {
$('#mltislct').multiselect();
});
</script>
</body>
</html>Output:
Output:
Example #2: Using Search Example
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js">
</script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect </h2>
<div class="bs-multiselect">
<select id = "mltislct" multiple = "multiple">
<option value = " HTML"> HTML
</option>
<option value = "CSS"> CSS
</option>
<option value = "Bootstrap"> Bootstrap
</option>
<option value = "Angular"> Angular </option>
<option value = "JavaScript"> JavaScript </option>
<option value = "jquery"> jquery </option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('#mltislct').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
filterPlaceholder:'Search Here..'
});
});
</script>
</body>
</html>Output:
Output:
Description:
- The “includeSelectAllOption” attribute is used for Select All options in the dropdown list.
- The “enableFiltering” becomes true for filter get output after searching in the dropdown list.
- The “enableCaseInsensitiveFiltering” becomes true for all types of letter filters, even for user search in another letter case.
Example #3: Using Selected and Disabled Attributes
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js">
</script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect</h2>
<div class="bs-multiselect">
<select id = "mltislct" multiple = "multiple">
<option value = " HTML" selected> HTML
</option>
<option value = "CSS" selected> CSS
</option>
<option value = "Bootstrap"> Bootstrap
</option>
<option value = "Angular"> Angular </option>
<option value = "JavaScript"> JavaScript </option>
<option value = "jquery" disabled > jquery </option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('#mltislct').multiselect();
});
</script>
</body>
</html>Output:
Output:
Description:
- The Html and CSS options use selected attributes in the bootstrap dropdown list by default.
- The dropdown list disables the jQuery option by utilizing the disabled attribute.
Example #4: Using Button Modification Attribute
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js">
</script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>
<style>
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect </h2>
<div class="bs-multiselect">
<select id = "mltislct" multiple = "multiple">
<option value = " HTML"> HTML
</option>
<option value = "CSS"> CSS
</option>
<option value = "Bootstrap"> Bootstrap
</option>
<option value = "Angular"> Angular </option>
<option value = "JavaScript"> JavaScript </option>
<option value = "jquery"> jquery </option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('#mltislct').multiselect({
buttonClass:'btn btn-warning',
buttonWidth:'260px',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
includeSelectAllOption: false,
filterPlaceholder:'Search Here..'
});
});
</script>
</body>
</html>Output:
Output:
Description:
- The “buttonClass” attribute work for the select contextual button as a dropdown selector.
- The “buttonWidth” works for modifying button width as per requirement.
- The “includeSelectAllOption” becomes false to remove selectAll option.
Conclusion
It works to acquire minimum space for maximum data. Bootstrap Multiselect make web application advanced and animated.
Recommended Articles
This is a guide to Bootstrap Multiselect. Here we discuss the definition, How to Work Multiselect Function in Bootstrap? and examples respectively. You may also have a look at the following articles to learn more –
