Multi js is a user-friendly replacement for select boxes with the multiple attribute.

CSS

<!-- multi.js css -->
<link rel="stylesheet" type="text/css" href="{{ URL::asset('build/libs/multi.js/multi.min.css') }}" />

Javascript

<!-- multi.js -->
<script src=";{{ URL::asset('build/multi.js/multi.min.js') }}"></script>

Initjs (Custom js)

<!-- init js -->
<script src="{{ URL::asset('build/js/pages/form-advanced.init.js') }}"></script>

Add Package

Remove Package

var multiSelectBasic = document.getElementById("multiselect-basic");
multi(multiSelectBasic, {
  enable_search: false
});

var multiSelectHeader = document.getElementById("multiselect-header");
multi(multiSelectHeader, {
  non_selected_header: "Cars",
  selected_header: "Favorite Cars"
});

var multiSelectOptGroup = document.getElementById("multiselect-optiongroup");
multi(multiSelectOptGroup, {
  enable_search: true
});