A jQuery multi-select list view plug-in: with six options
The multi-select list view plug-in
In professional websites where you generally need to select multiple options from one list to the other are used for specific type 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 option 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 redo and undo 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 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(document).ready(function() { $('#lstview').multiselect(); }); </script> |
The multi-select list view is ready with six options.
A demo with 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 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.
In the <script> part, the search option is used as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
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 the Bootstrap, you may use different buttons of Bootstraps and also use custom class for list view to give it some colors etc.
See online demo and code
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.
See the complete code in the demo page.