[Jquery] multiselect.js를 이용한 Multi Select Box 구현하기

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/multiselect.js"></script>

<div class="row">
  <div class="col-xs-5">
    <select name="from" id="multiselect" class="form-control" size="8" 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="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>

multiselect 초기화

$('#multiselect').multiselect();

Demo : https://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/

Reference : https://www.jqueryscript.net/form/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js.html