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_for('static' ,filename='libs/multi.js/multi.min.css')}}" />

Javascript

<!-- multi.js -->
<script src="{{url_for('static' ,filename='libs/multi.js/multi.min.js')}}"></script>

Initjs (Custom js)

<!-- init js -->
<script src="{{url_for('static' ,filename='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
});