Retrieving selected values in Materialize CSS multiple select using JavaScript

Question

I'm using multiple select of Materialize CSS in a form to select multiple values. The UI is working fine, but I couldn't find a way to retrieve all the selected values. I used an onChange event handler to retrieve the values. However instead of an array of selected values it is returning only the first selected value in the list.

Can anybody explain how to do it using JavaScript for a simple multiple select like the one below? (Not by using jQuery)

      <select id='mySelect' multiple>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
      </select>

Answer 1

You can get the selected in this way:

html:

<select multiple id="option-select">
   <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>

js

document.addEventListener("DOMContentLoaded", function () {
  const selects = document.querySelector("select");
  const instances = M.FormSelect.init(selects, {});
  const selectOption = document.querySelector("#option-select");
    
  selectOption.addEventListener("change", function () {
    const instance = M.FormSelect.getInstance(selectOption);
    const selectedValues = instance.getSelectedValues();
    console.log(selectedValues);
  });
});