<div class="container">
<h1>Bootstrap responsive multiselect</h1>
<div class="row addremove-multiselect">
<div class="col-lg-5 col-sm-5 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">Available Services</div>
<div class="panel-body">
<select id="available-select" class="multiselect available form-control" size="8" multiple="multiple">
<option value="PO">PO - Pointer Insecticide</option>
<option value="SAR">SAR - Service call Aeration</option>
<option value="SC">SC - Service Call Lawn</option>
<option value="SCM">SCM - Service Call Manager</option>
<option value="SCP">SCP - Service Call Perimeter</option>
<option value="SCQ">SCQ - Service Call Mosquito</option>
<option value="SCS">SCS - Service Call Moles</option>
<option value="SCT">SCT - Service Call Tree</option>
<option value="SH">SH - Shepherd Fungicide</option>
</select>
</div>
</div>
</div>
<div class="multiselect-controls col-lg-2 col-sm-2 col-xs-12">
<button type="button" id="rightall" class="rightall btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
<button type="button" id="right" class="right btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button type="button" id="left" class="left btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button type="button" id="leftall" class="leftall btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
</div>
<div class="col-lg-5 col-sm-5 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">Selected Services</div>
<div class="panel-body">
<select id="selected-select" class="multiselect selected form-control" size="8" multiple="multiple">
</select>
</div>
</div>
</div>
</div>
</div>
$(function () {
function moveItems(origin, dest) {
$(origin).find(':selected').appendTo(dest);
$(dest).find(':selected').removeAttr("selected");
$(dest).sort_select_box();
}
function moveAllItems(origin, dest) {
$(origin).children("option:visible").appendTo(dest);
$(dest).find(':selected').removeAttr("selected");
$(dest).sort_select_box();
}
$('.left').on('click', function () {
var container = $(this).closest('.addremove-multiselect');
moveItems($(container).find('select.multiselect.selected'), $(container).find('select.multiselect.available'));
});
$('.right').on('click', function () {
var container = $(this).closest('.addremove-multiselect');
moveItems($(container).find('select.multiselect.available'), $(container).find('select.multiselect.selected'));
});
$('.leftall').on('click', function () {
var container = $(this).closest('.addremove-multiselect');
moveAllItems($(container).find('select.multiselect.selected'), $(container).find('select.multiselect.available'));
});
$('.rightall').on('click', function () {
var container = $(this).closest('.addremove-multiselect');
moveAllItems($(container).find('select.multiselect.available'), $(container).find('select.multiselect.selected'));
});
$('select.multiselect.selected').on('dblclick keyup',function(e){
if(e.which == 13 || e.type == 'dblclick') {
var container = $(this).closest('.addremove-multiselect');
moveItems($(container).find('select.multiselect.selected'), $(container).find('select.multiselect.available'));
}
});
$('select.multiselect.available').on('dblclick keyup',function(e){
if(e.which == 13 || e.type == 'dblclick') {
var container = $(this).closest('.addremove-multiselect');
moveItems($(container).find('select.multiselect.available'), $(container).find('select.multiselect.selected'));
}
});
});
$.fn.sort_select_box = function(){
// Get options from select box
var my_options =$(this).children('option');
// sort alphabetically
my_options.sort(function(a,b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
else return 0
})
//replace with sorted my_options;
$(this).empty().append( my_options );
// clearing any selections
$("#"+this.attr('id')+" option").attr('selected', false);
}
