无jQuery时Materialize.css 1.0.0下拉选择框赋值失败求助

我之前也踩过Materialize这个FormSelect组件的坑！直接给初始化后的实例赋值.value确实没用，因为Materialize的下拉组件是基于原生<select>封装的，它的UI状态和原生元素绑定，得用正确的姿势来更新：

正确的设置步骤 #

1. 先给原生的<select>元素设置目标值
2. 调用Materialize实例的update()方法，让组件同步原生元素的状态到UI

举个完整的代码例子：

document.addEventListener('DOMContentLoaded', function() {
  // 获取原生select元素并初始化Materialize实例
  const selectedCategory = document.querySelector('#category');
  const materializeSelect = M.FormSelect.init(selectedCategory);

  // 假设从本地存储取出上次保存的选中值
  const savedValue = localStorage.getItem('lastSelectedCategory');
  
  if (savedValue) {
    // 第一步：给原生select设置值
    selectedCategory.value = savedValue;
    // 第二步：调用update方法同步UI
    materializeSelect.update();
  }
});

为什么直接设置.value无效？ #

Materialize的FormSelect实例并没有暴露可直接修改的value属性，它的内部状态完全依赖原生<select>的状态。你之前直接设置原生元素的.value有效，是因为当时还没初始化Materialize组件；一旦组件初始化后，就必须通过update()方法来通知组件重新渲染UI，不然只会修改原生元素的值，而Materialize生成的下拉UI不会同步更新。

如果是多选下拉框，逻辑也是一样的：先给原生select的对应option设置selected属性，再调用update()方法即可。

内容的提问来源于stack exchange，提问作者Taylor A. Leach