使用 JavaScript 在 Materialise CSS 多个 select 中检索 selected 值

Question

我正在使用多个select 将CSS具体化为select 多个值。 UI 工作正常，但我找不到检索所有 selected 值的方法。我使用 onChange 事件处理程序来检索值。但是，它返回的不是 selected 值的数组，而是仅返回列表中的第一个 selected 值。

任何人都可以解释如何使用 JavaScript 来实现像下面这样的简单倍数 select 吗？（不是通过使用 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);
  });
});

使用 JavaScript 在 Materialise CSS 多个 select 中检索 selected 值

Retrieving selected values in Materialize CSS multiple select using JavaScript

javascript

materialize

multi-select

multipleselection