Hide option in materialize select box

Question

Materialize docs - http://materializecss.com/forms.html

I want to hide Materialize select option by jquery. I added a class to an option and by using this code $('.break_5').hide(); option is hidden successfully. But it is displayed in Materialize select box.

Answer 1

According to the docs, in order to update the items inside the select, you must destroy the material and rerun initialization.

$('#mySelectID').material_select('destroy');

Then recreate your select with or without certain options and initialize new select.

$('#mySelectID option').hasClass('break_5').remove();
$('#mySelectID').material_select();

Answer 2

The framework has changed since this answer, so here we go:

let _select: M.FormSelect;
function InitSelect(): void {
  _select = M.FormSelect.init($('#your-select'))[0];
}

function RecreateSelectItems(userIsAdmin: boolean): void {
  _select.destroy();
  if (!userIsAdmin) {
    $('#your-select option.only-admin').remove();
  }

  InitSelect();
}

It's typescript, but you get the idea :) Cheers.