Integrate Two side Multi Select Plugin with jQuery multiselect.js

Here I am going to show you how to Integrate Two side Multi Select Plugin with jQuery multiselect.js on your website and add feature like user can select one or more items and send them to the other side. multiselect.js is a small jQuery plugin that helps you improve the user experience regarding the use of multiple cross selects.It also has a sort function that can be defined in order of your needs for each multiple select.You can fully customize it via CSS, you can extend it and have as many multi selects as you want on the page. For example you can create two select box of skill set where user can select one or more skill set from first select box and send them to the other empty select See example below.
two-sides-multiselect



Integrate Two side Multi Select Plugin with jQuery multiselect.js

Below I am going to demonstrate a very basic two side Multi Select feature you can customise demo as per your project need.

Libraries

This plugin uses bootstrap library for designing so first include all bootstrap JS+CSS library after that include multiselect.js on page.

<!--CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
<!--JS-->
<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="multiselect.min.js"></script>



HTML

Create a two sided select list In this example created two select list one is full with skill set and other is empty user can select their skill set and user can select one or more skill set from first select list and send them to the other empty select list with undo and redo feature.

<div class="row">
    <div class="col-xs-5">
        <select name="from[]" id="undo_redo" class="form-control" size="13" multiple="multiple">
            <option value="1">C++</option>
            <option value="2">C#</option>
            <option value="3">Haskell</option>
            <option value="4">Java</option>
            <option value="5">JavaScript</option>
            <option value="6">Lisp</option>
            <option value="7">Lua</option>
            <option value="8">MATLAB</option>
            <option value="9">NewLISP</option>
            <option value="10">PHP</option>
            <option value="11">Perl</option>
            <option value="12">SQL</option>
            <option value="13">Unix shell</option>
        </select>
    </div>
 
    <div class="col-xs-2">
        <button type="button" id="undo_redo_undo" class="btn btn-primary btn-block">undo</button>
        <button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>
        <button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
        <button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
        <button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>
        <button type="button" id="undo_redo_redo" class="btn btn-warning btn-block">redo</button>
    </div>
 
    <div class="col-xs-5">
        <select name="to[]" id="undo_redo_to" class="form-control" size="13" multiple="multiple"></select>
    </div>
 </div>

JS

Finally Call the plugin on page and see the action.

<script>
$(function() {   
  $('#undo_redo').multiselect();
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.Don’t forget to read license for using above plugin in your commercial project.



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.