使用 JavaScript 在 Materialize CSS 中检索选定值的多选

Question

我在表单中使用Materialize CSS的多个选择来选择多个值。用户界面工作正常，但我找不到检索所有选定值的方法。我使用 onChange 事件处理程序来检索值。但是，它返回的不是选定值的数组，而是仅返回列表中的第一个选定值。任何人都可以解释如何使用JavaScript来进行如下所示的简单多重选择吗？（不是通过使用 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

您可以通过这种方式获得选择：

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);

  });

});