MULTI SELECT

by Carl Angelo Nievarez

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <select id="sbOne" multiple="multiple" class="form-control">
      <option value="1">Alpha</option>
      <option value="2">Beta</option>
      <option value="3">Gamma</option>
      <option value="4">Delta</option>
      <option value="5">Epsilon</option>
    </select>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <select id="sbTwo" multiple="multiple" class="form-control">
      <option value="6">Zeta</option>
      <option value="7">Eta</option>
    </select>
  </div>
</div>



<br />

<button type="button" class="btn btn-default" id="left"><span class="fa fa-angle-left"></span></button>
<button type="button" class="btn btn-default" id="right"><span class="fa fa-angle-right"></span></button>
<button type="button" class="btn btn-default" id="leftall"><span class="fa fa-angle-double-left"></span></button>
<button type="button" class="btn btn-default" id="rightall"><span class="fa fa-angle-double-right"></span></button>

JavaScript

$(function() {
  function moveItems(origin, dest) {
    $(origin).find(':selected').appendTo(dest);
  }

  function moveAllItems(origin, dest) {
    $(origin).children().appendTo(dest);
  }

  $('#left').click(function() {
    moveItems('#sbTwo', '#sbOne');
  });

  $('#right').on('click', function() {
    moveItems('#sbOne', '#sbTwo');
  });

  $('#leftall').on('click', function() {
    moveAllItems('#sbTwo', '#sbOne');
  });

  $('#rightall').on('click', function() {
    moveAllItems('#sbOne', '#sbTwo');
  });
});

$('#left').click(function() {    
  moveItems('#sbTwo', '#sbOne');
}); 
$('#right').on('click', function() {    
  moveItems('#sbOne', '#sbTwo');
}); 
$('#leftall').on('click', function() {    
  moveAllItems('#sbTwo', '#sbOne');
}); 
$('#rightall').on('click', function() {    
  moveAllItems('#sbOne', '#sbTwo');
});