Multiple Cross Selects In Jquery Plugin – Multiselect

File Size:68.7 KB
Views Total:209
Last Update:December 24, 2017
Publish Date:December 24, 2017
Official Website:Go to website
License:MIT

This is a small Multiple Cross Selects jQuery plugin. it can be helps you improve the user experience regarding the use of multiple cross selects. It is very easy to install and can be easily customized because it has callbacks for many events, such as : before move to right, after move to left ,

How TO Use :

  1.  Add Plugin Source:
    <script type="text/javascript" src="path/to/jquery.min.js"></script>
    <script type="text/javascript" src="path/to/multiselect.min.js"></script>

2. Add Html Code:

<div class="row">
	<div class="col-xs-5">
		<select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
			<option value="1">Item 1</option>
			<option value="3">Item 3</option>
			<option value="2">Item 2</option>
		</select>
	</div>
	
	<div class="col-xs-2">
		<button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
		<button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
		<button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
		<button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
	</div>
	
	<div class="col-xs-5">
		<select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
	</div>
</div>

3. Add Plugin Script:

<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#multiselect').multiselect();
});
</script>

Change Log

v.2.4.0

Oct 16