Materialize CSS下拉框change事件返回值延迟异常求助

问题原因 #

你遇到的选中值滞后（首次返回undefined，后续返回上一次选中值）的问题，核心原因是原生change事件的触发时机早于Materialize FormSelect组件内部状态的更新。

Materialize的Select组件是对原生select元素的封装增强，当用户选择选项时，浏览器会先触发原生select的change事件，而此时Materialize组件还未完成自身选中状态的同步更新。这就导致你在原生change事件中调用instance.getSelectedValues()时，拿到的是组件更新前的旧值，从而出现了滞后的现象。

解决方案 #

有两种简单的修复方式，任选其一即可：

方案1：直接使用原生select的value属性

原生select元素的value会在用户选择时实时更新，不受Materialize组件更新延迟的影响，直接获取即可得到当前选中的正确值：

document.addEventListener("DOMContentLoaded", function () {
  const selects = document.querySelector("select");
  M.FormSelect.init(selects, {});
  const selectOption = document.querySelector("#option-select");
    
  selectOption.addEventListener("change", function () {
    console.log(this.value); // 直接获取原生select的value
  });
});

方案2：使用Materialize组件的onChange回调

在初始化FormSelect组件时，传入onChange配置项，这个回调会在组件内部状态更新完成后触发，确保拿到的是最新的选中值：

document.addEventListener("DOMContentLoaded", function () {
  const selectOption = document.querySelector("#option-select");
  // 初始化时绑定组件内部的onChange回调
  const instance = M.FormSelect.init(selectOption, {
    onChange: function() {
      const selectedValues = instance.getSelectedValues();
      console.log(selectedValues[0]);
    }
  });
});

这两种方式都能解决选中值滞后的问题，方案1更简洁直接，方案2适合需要依赖Materialize组件API的场景。

内容的提问来源于stack exchange，提问作者solarroi