Users Online

· Guests Online: 143

· Members Online: 0

· Total Members: 188
· Newest Member: meenachowdary055

Forum Threads

Newest Threads
No Threads created
Hottest Threads
No Threads created

Latest Articles

· Do while loop
· The for loop in C
· C while loop
· Pointers in C
· Functions in C

Articles Hierarchy

Articles Home » Bootstrap » Bootstrap Multiselect

Bootstrap Multiselect

Bootstrap Multiselect

By Mrunali PangeMrunali Pange

Bootstrap Multiselect

Definition of Bootstrap Multiselect

The bootstrap Multiselect is a plugin component to select multiple options in the dropdown list. It is an advanced plugin that works for a user to select many options from the dropdown list as per requirement. It makes a single dropdown list to select multi options using a checkbox for web application visitors. The bootstrap Multiselect needed bootstrap and jquery method for space and memory saving in bootstrap web applications. This component is used for the visitor to interconnection with the application and user with minimum space.

Syntax:

  • This needs 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 Multiselect Function works in Bootstrap?

  • The bootstrap supporting file 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 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 used in the body or head section of the html page.
<script>
$(document).ready(function() {
$('#id-name').multiselect();
});
</script>
  • The working procedure steps are combining 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:

bootstrap multiselect 1

Output:

bootstrap multiselect 2

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:

bootstrap multiselect example 2-1

Output:

bootstrap multiselect example 2-2

Description:

  • The “includeSelectAllOption” attribute 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 letters filter even user search in another letter case.
  • The filterPlaceholder used to make a place for searching the item.

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:

Example 3-1

Output:

Example 3-2

Description:

  • The Html and CSS options use selected attributes by default in the bootstrap dropdown list.
  • The jquery option is disabling using the disabled attribute in the dropdown list.

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:

example 4-1

Output:

example 4-2

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 is used in the web application to communicate with the user. It works to acquire minimum space for maximum data. The bootstrap Multiselect make web application advance and animated.

· Posted by Superadmin on April 30 2023 · 0 Comments · 100 Reads · Print

Comments

No Comments have been Posted.

Post Comment

Please Login to Post a Comment.

Ratings

Rating is available to Members only.

Please login or register to vote.
No Ratings have been Posted.
Render time: 1.07 seconds
10,811,686 unique visits