如何在Materialize框架中触发select下拉框的change事件？

我太懂这种踩坑的感觉了——原生HTML的select用$('select').val(xxx).change()就能顺理成章触发change事件，但Materialize的定制select组件这套方法完全不管用。这是因为Materialize的select是基于原生select封装的UI组件：它把原生select隐藏了，用自己的DOM结构渲染下拉框，直接操作原生元素的方法既不会同步到UI，也没法自动触发事件。

正确的操作步骤 #

你需要分三步来实现需求：

1. 给原生select设置目标值
2. 调用Materialize的formSelect()方法同步UI状态
3. 手动触发原生select的change事件（如果有监听这个事件的需求）

修改后的完整代码如下：

$(document).ready(function() {
  // 初始化Materialize Select组件
  $('select').formSelect();

  $('button').on('click', function() {
    // 生成1-3的随机选中值
    const randomValue = Math.floor(Math.random() * 3) + 1;
    const $selectElement = $('select');

    // 1. 设置原生select的value
    $selectElement.val(randomValue);
    // 2. 更新Materialize的UI，让选中状态同步到视觉组件
    $selectElement.formSelect();
    // 3. 手动触发change事件，确保监听函数能正常执行
    $selectElement.trigger('change');
  });

  // 示例：监听select的change事件（用于测试验证）
  $('select').on('change', function() {
    console.log('当前选中值：', $(this).val());
  });
});

为什么这套方法有效？ #

• Materialize的formSelect()方法仅负责同步原生select的值到自定义UI组件，它只会更新视觉效果，不会主动触发change事件——毕竟它默认只处理用户手动选择的场景。
• 手动调用trigger('change')是为了让所有绑定在原生select上的change监听函数执行，这和原生select的行为逻辑保持一致。

如果你更倾向于使用Materialize自身的事件体系，也可以监听它的自定义事件form-select:change，不过监听原生的change事件兼容性更好，也更符合常规开发习惯。

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