Updated April 1, 2023
Introduction to jQuery multiselect
jQuery multiselect is an easier and highly customizable substitute for the standard <select> with the multiple boxes. This is basically a plugin that is more user-friendly and easy to implement when it comes to multiple selections of the checkboxes.
Features of jQuery multiselect plugin
- A very small and easy to install jQuery plugin.
- Turns multi-select options into nice and easy to use checkboxes.
- Has no dependencies.
- Mobile friendly.
- Highly customizable since it has callbacks for many events.
- It provides search functionality to filter the options.
- Has the ability to check or uncheck a group of checkboxes via a master checkbox.
- It also provides sort functionality that can be used in order of the needs for each multiple select.
- East to style with CSS.
- It can be extended to have as many multi-selects as you want on the page.
- Helps improve the user experience.
Implementation of jQuery multiselect plugin
jQuery multiselect plugin is very easy to install and implement. This is just a simple alternative for the standard select with multiple activated attributes.
Let us take a look at some of the examples to understand its implementation in jQuery.
Example #1
Following is a very simple example to demonstrate the usage of the jQuery multiselect feature.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery multiselect Demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
jQuery.fn.multiselect = function() {
$(this).each(function() {
var checkboxes = $(this).find("input:checkbox");
checkboxes.each(function() {
var checkbox = $(this);
if (checkbox.prop("checked"))
checkbox.parent().addClass("multiselect-on");
// Highlights checkboxes that the user selects
// or removes the highlight if the user click on the checked boxes
checkbox.click(function() {
if (checkbox.prop("checked"))
checkbox.parent().addClass("multiselect-on");
else
checkbox.parent().removeClass("multiselect-on");
});
});
});
};
$(function() {
$(".multiselect").multiselect();
});
</script>
<style>
.multiselect {
width:20em;
height:5em;
border:solid 1px gray;
overflow:auto;
}
.multiselect label {
display:block;
}
.multiselect-on {
color: lightgray;
background-color:cadetblue;
</style>
</head>
<body>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Option 1</label>
<label><input type="checkbox" name="option[]" value="2" />Option 2</label>
<label><input type="checkbox" name="option[]" value="3" />Option 3</label>
<label><input type="checkbox" name="option[]" value="4" />Option 4</label>
<label><input type="checkbox" name="option[]" value="5" />Option 5</label>
<label><input type="checkbox" name="option[]" value="6" />Option 6</label>
<label><input type="checkbox" name="option[]" value="7" />Option 7</label>
</div>
</html>Output
- When the page first loads in the browser, it gets displayed as shown in the below screenshot.
- A list of options along with the checkboxes can be seen.
- As you go on checking the boxes, the options get selected.
- The highlighted options in the below image are the selected ones.
- You can also deselect the selected options by clicking again on the checked boxes.
- In the below image, the checkbox for Option 2 was clicked which deselected it.
Note: Required jQuery multiselect plugins need to be loaded in the code before calling them.
Example #2
Let us consider another example that illustrates the conversion of simple multiple select lists into a searchable dual list box very easily and quickly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width = device-width, initial-scale = 1" />
<link rel="stylesheet" href="multi.min.css" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="multi.min.js"></script>
<script>
$(function() {
$("#subj").multi({
non_selected_header: "Subjects",
selected_header: "Subjects Selected",
enable_search: true,
search_placeholder: "Search"
});
});
</script>
</head>
<body>
<div style="width: 50%; margin-left: 100px;">
<select multiple="multiple" name="Subjects" id="subj">
<option>Maths</option>
<option>English</option>
<option>Hindi</option>
<option>Computer</option>
<option>Physics</option>
<option>Chemistry</option>
<option>Biology</option>
<option>EVS</option>
<option>Arts</option>
<option>Economics</option>
<option>Commerce</option>
</select>
</div>
</body>
</html>Output
- When the page is first loaded in the browser, below is the screen that shows up.
- As shown in the image, we have a normal list of subjects to the left of the table.
- There is also a search bar on the top with placeholder “Search” for search input.
- You can make the selection by clicking on the option on the left.
- The selected option then gets copied to the right of the table under the “Subjects Selected” header.
- You can make as many selections as you want.
- We can also deselect the selections by clicking on the selected options as shown below.
- To search any option, simply type that searchable option in the Search bar, it will display the searched result.
Example #3
In the following example, we are converting the native select box into a multi-select control with checkboxes.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width = device-width, initial-scale = 1" />
<link href="multiselect.css" rel="stylesheet" />
<script src="multiselect.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(function() {
document.multiselect('#selected');
});
</script>
</head>
<body>
<select id='selected' multiple>
<option value='1'>Item 1</option>
<option value='2'>Item 2</option>
<option value='3'>Item 3</option>
<option value='4'>Item 4</option>
<option value='5'>Item 5</option>
</select>
</div>
</body>
</html>Output
- When the page first loads in the browser, the below screen shows up.
- As shown in the image, you have in total of five items that are all initially selected.
- On clicking the down arrow, a dropdown list gets displayed with all the checkboxes checked shown below.
- The number shows the count of selections made, here it is
- You can now deselect the options by unchecking the checked boxes.
- As you uncheck the boxes, the number goes on decreasing as shown below.
- On collapsing the dropdown, you can see the options selected along with the number of selections made.
- The default styles can be overridden in the “multiselect.css” file as required.
Conclusion
jQuery multiselect is an efficient jQuery plugin that converts the native select boxes into a multi-select control with checkboxes. This plugin allows you to create multi-select based lists quickly. It can support both single and multiple selections. This is a lightweight and more user-friendly drop-in substitute for the standard <select> with multiple attributes activated. This plugin helps in improving and enhancing the user experience in the case of multiple selections. It provides the ability to filter elements by searching.
Recommended Articles
This is a guide to jQuery multiselect. Here we discuss the Features and Implementations of jQuery multiselect plugin along with the examples. You may also have a look at the following articles to learn more –
