A jQuery Multi-select List view Plug-in: with Six Options

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 below with the description and how to set up this plug-in below:

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:

The button code is added in between these two <select> tags.

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. Locate multiselect.js and save it to your system.

As such, for the demo Bootstrap framework is used, and 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.

Full code of the demo:

<!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.js</h1>
<div class="row">
                <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>
                
                <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="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>

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 on both sides.

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:

Only these changes are made in the first example to enable the search option.

In the markup, the <select> tag’s names are used as follows:

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, and JavaScript into the web category while Java, and Python into High-level languages, etc.

Similarly, giving options of cars for different brands in a categorized way.

See the demo to check how it works:

The code:

<!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.js</h1>
<div class="row">
    <div class="col-sm-5">
        <select name="from" id="optgroup" class="form-control" size="8" multiple="multiple">
            <optgroup label="Web">
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="CSS3">CSS3</option>
                <option value="jQuery">jQuery</option>
                <option value="JavaScript">JavaScript</option>
            </optgroup>
            <optgroup label="High Level">
                <option value="Java">Java</option>
                <option value="Python">Python</option>
            </optgroup>
            <option value="cpp">C++</option>
        </select>
    </div>
    
    <div class="col-sm-2">
        <button type="button" id="optgroup_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>
        <button type="button" id="optgroup_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
        <button type="button" id="optgroup_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
        <button type="button" id="optgroup_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>
    </div>
    
    <div class="col-sm-5">
        <select name="to" id="optgroup_to" class="form-control" size="8" multiple="multiple">
            <option value="1">C++</option>
        </select>
    </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($) {
    $("#optgroup").multiselect();
});
</script>
</body>
</html>

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>

A demo of multi-select list-view

A demo with a search option

A demo with option groups

Adding some colors demo

Learn More: