如何在Materialize CSS中以编程方式选中下拉选项？

嘿，我懂你碰到的麻烦了——Materialize的下拉组件不是直接操作原生<select>就能同步界面的，因为它会把原生元素隐藏，生成一套自定义的样式组件。你现在的代码只更新了原生select的值，但没通知Materialize去刷新它的UI，所以看起来选中状态没生效。

正确的处理步骤应该是这样的：在设置完原生select的值之后，调用Materialize提供的update方法来同步界面显示。

完整可运行代码示例 #

// 先初始化Materialize下拉组件
$('select').material_select();

// 把原生select的value设置为第一个选项的值
$('#select_1').val($('#select_1 option:first').val());

// 关键一步：通知Materialize更新下拉组件的UI状态
$('#select_1').material_select('update');

为什么原来的代码不生效？ #

Materialize在初始化下拉框时，会基于原生<select>的当前状态生成对应的自定义下拉菜单（比如带样式的列表元素）。当你直接修改原生select的value时，这套自定义UI并不会自动感知到变化，必须手动调用material_select('update')方法，让它重新读取原生select的状态并更新界面显示。

额外小提示 #

• 如果你的下拉选项是动态加载的（比如通过AJAX获取后添加到select中），记得在添加完选项后先执行初始化，再设置值和更新；或者直接在初始化完成后执行上述步骤。
• 你也可以简化代码写法，让逻辑更清晰：

const firstOptionValue = $('#select_1').find('option').first().val();
$('#select_1').val(firstOptionValue).material_select('update');

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