Select all option in materialize multi select - multi-select

Question

Bootstrap multisleect has option for select all (for example here). Is this possible in materialize multi select?

Answer 1

Here is a smaller version: https://codepen.io/souvik1809/pen/rvNMyO
HTML
<div class = "row">
<label>Materialize Multi Select</label>
<select multiple class="select_all">
<option value="" disabled selected>Choose your option</option>
<option value = "1">Mango</option>
<option value = "24">Orange</option>
<option value = "3">Apple</option>
<option value = "4">Cucumber</option>
<option value = "5">Litchi</option>
</select>
</div>
JavaScript
$(document).ready(function() {
// $('select').val([1]);
$('select').formSelect();
$('select.select_all').siblings('ul').prepend('<li id=sm_select_all><span>Select All</span></li>');
$('li#sm_select_all').on('click', function () {
var jq_elem = $(this),
jq_elem_span = jq_elem.find('span'),
select_all = jq_elem_span.text() == 'Select All',
set_text = select_all ? 'Select None' : 'Select All';
jq_elem_span.text(set_text);
jq_elem.siblings('li').filter(function() {
return $(this).find('input').prop('checked') != select_all;
}).click();
});
});

Answer 2

You can add them like this:
https://codepen.io/anon/pen/XgEbRL?editors=1010
HTML:
<div class="input-field col s12">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
<a class="btn" onClick="javascript:selectAll()">Select all</a>
<a class="btn" onClick="javascript:selectNone()">Select none</a>
JavaScript:
var activateOption = function(collection, newOption) {
if (newOption) {
collection.find('li.selected').removeClass('selected');
var option = $(newOption);
option.addClass('selected');
}
};
$(document).ready(function() {
$('select').material_select();
$('.test-input > .select-wrapper > .select-dropdown').prepend('<li class="toggle selectall"><span><label></label>Select all</span></li>');
$('.test-input > .select-wrapper > .select-dropdown').prepend('<li style="display:none" class="toggle selectnone"><span><label></label>Select none</span></li>');
$('.test-input > .select-wrapper > .select-dropdown .selectall').on('click', function() {
selectAll();
$('.test-input > .select-wrapper > .select-dropdown .toggle').toggle();
});
$('.test-input > .select-wrapper > .select-dropdown .selectnone').on('click', function() {
selectNone();
$('.test-input > .select-wrapper > .select-dropdown .toggle').toggle();
});
});
function selectNone() {
$('select option:selected').not(':disabled').prop('selected', false);
$('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:checked').not(':disabled').prop('checked', '');
//$('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:checked').not(':disabled').trigger('click');
var values = $('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:disabled').parent().text();
$('input.select-dropdown').val(values);
console.log($('select').val());
};
function selectAll() {
$('select option:not(:disabled)').not(':selected').prop('selected', true);
$('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:not(:checked)').not(':disabled').prop('checked', 'checked');
//$('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:not(:checked)').not(':disabled').trigger('click');
var values = $('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:checked').not(':disabled').parent().map(function() {
return $(this).text();
}).get();
$('input.select-dropdown').val(values.join(', '));
console.log($('select').val());
};