The multi-select list view plug-in
In professional websites, you generally need to select multiple options from one list to the other that are used for specific types of data.
For example, select your skills from the available list of HTML, JavaScript, jQuery, Bootstrap, CSS, etc. This list is generally presented on the left side.
You keep on selecting by single or double-clicking and the selected items will move to the right list, showing which items are selected.
By using a jQuery plug-in, you may create this list-view with multiple selection options quite easily. Still not clear? Have a look at the demos in the following section.
A demo of multi-select list-view
In this demo, a list-view with multiple selection options is created. See a demo online with the description and how to set up this plug-in below:
See online demo and code
You can see, the multi select list view has a few options as well, like redoing and undoing the actions. Select an item from the left options box and click on the arrow to add it to the right list. Similarly, you may double-click an item to move towards the left or right.
For creating this in your web pages, first Bootstrap framework’s CSS file is included in the <head> section:
In the markup section, simply create an HTML dropdown with <select> tag:
<div class="col-xs-5"> <select name="from" id="lstview" class="form-control" size="13" multiple="multiple"> <option value="HTML">HTML</option> <option value="2">CSS</option> <option value="CSS">CSS3</option> <option value="jQuery">jQuery</option> <option value="JavaScript">JavaScript</option> <option value="Bootstrap">Bootstrap</option> <option value="MySQL">MySQL</option> <option value="PHP">PHP</option> <option value="JSP">JSP</option> <option value="Rubi on Rails">Rubi on Rails</option> <option value="SQL">SQL</option> <option value="Java">Java</option> <option value="Python">Python</option> </select> </div>
Similarly, for right list view:
<select name=”to” id=”lstview_to” class=”form-control” size=”13″ multiple=”multiple”></select>
The button code is added in between these two <select> tags.
(See the complete code in the demo page)
Just above the </body> tag, place the jQuery library and plug-in’s JS file (multiselect.js). You may download it from the Github website here or view source the demo page. Locate multiselect.js and save it to your system.
As such, for the demo Bootstrap framework is used, its JS file is also included.
Finally, initiate the plugin in the <script> section:
<script type="text/javascript">
$(document).ready(function() {
$('#lstview').multiselect();
});
</script>
The multi-select list view is ready with six options.
A demo with a search option
By using the “search” option of plug-in in the <script> part and adjusting some code in the markup, you may create multi-select list view controls with search boxes at both side.
In that case, the search terms will be shortlisted in the multi-select dropdowns. For example, if you type “CS” in the above example, the left box will shortlist the options to CSS and CSS3. See a demo online by using different terms:
See online demo and code
Only these changes are made than the first example to enable the search option.
In the markup, the <select> tag’s names are used as follows:
<select name=”from[]” id=”lstview” class=”form-control” size=”8″ multiple=”multiple”>
That is the names with square brackets.
Complete code with markup and JavaScript:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>A demo of using jQuery multiselect list view</h1>
<div class="row">
<div class="col-xs-5">
<select name="from[]" id="lstview" class="form-control" size="8" multiple="multiple">
<option value="HTML">HTML</option>
<option value="2">CSS</option>
<option value="CSS">CSS3</option>
<option value="jQuery">jQuery</option>
<option value="JavaScript">JavaScript</option>
<option value="Bootstrap">Bootstrap</option>
<option value="MySQL">MySQL</option>
<option value="PHP">PHP</option>
<option value="JSP">JSP</option>
<option value="Rubi on Rails">Rubi on Rails</option>
<option value="SQL">SQL</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
</select>
</div>
<div class="col-xs-2">
<button type="button" id="lstview_undo" class="btn btn-danger btn-block">undo</button>
<button type="button" id="lstview_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>
<button type="button" id="lstview_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button type="button" id="lstview_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button type="button" id="lstview_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>
<button type="button" id="lstview_redo" class="btn btn-warning btn-block">redo</button>
</div>
<div class="col-xs-5">
<select name="to[]" id="lstview_to" class="form-control" size="8" multiple="multiple"></select>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/multi-select/multiselect.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#lstview').multiselect({
search: {
left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
right: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
}
});
});
</script>
</body>
</html>
That’s it!
A demo with option groups
You may also show options in groups. For example, categorizing HTML, CSS, JavaScript into the web category while Java, Python into High level languages etc. Similarly, giving options of cars for different brands in categorized way.
See the demo to check how it works:
See online demo and code
See the complete code in the demo page.
Adding some colors demo
As such, the demos are using Bootstrap, you may use different buttons of Bootstraps and also use a custom class for the list view to give it some colors, etc.
This is how the buttons are used with different Bootstrap classes:
The first button is given the btn-danger, second and fifth btn-primary, third and fourth btn-success while the last button is assigned the btn-warning Bootstrap class. Both select tags are given a custom CSS class which is placed in the <style> tag under <head> section.
The code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.formcls {
padding: 9px;
border: solid 1px #F0AD4E;
outline: 0;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #F7D19F), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #F7D19F 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
</style>
</head>
<body>
<div class="container">
<h1>A demo of using jQuery multiselect.js</h1>
<div class="row">
<div class="col-xs-5">
<select name="from" id="lstview" class="form-control formcls" size="13" multiple="multiple">
<option value="HTML">HTML</option>
<option value="2">CSS</option>
<option value="CSS">CSS3</option>
<option value="jQuery">jQuery</option>
<option value="JavaScript">JavaScript</option>
<option value="Bootstrap">Bootstrap</option>
<option value="MySQL">MySQL</option>
<option value="PHP">PHP</option>
<option value="JSP">JSP</option>
<option value="Rubi on Rails">Rubi on Rails</option>
<option value="SQL">SQL</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
</select>
</div>
<div class="col-xs-2">
<button type="button" id="lstview_undo" class="btn btn-danger btn-block">undo</button>
<button type="button" id="lstview_rightAll" class="btn btn-primary btn-block"><i class="glyphicon glyphicon-forward"></i></button>
<button type="button" id="lstview_rightSelected" class="btn btn-success btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button type="button" id="lstview_leftSelected" class="btn btn-success btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button type="button" id="lstview_leftAll" class="btn btn-primary btn-block"><i class="glyphicon glyphicon-backward"></i></button>
<button type="button" id="lstview_redo" class="btn btn-warning btn-block">redo</button>
</div>
<div class="col-xs-5">
<select name="to" id="lstview_to" class="form-control formcls" size="13" multiple="multiple"></select>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/multi-select/multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#lstview').multiselect();
});
</script>
</body>
</html>