使用Materialize主题时jQuery在$(document).ready中追加select选项不加载求助

问题成因 #

Materialize 框架为实现统一的 Material Design 交互样式，会在页面加载完成后自动初始化所有原生 <select> 元素：默认隐藏原生 <select> 节点，额外生成一套独立的自定义 DOM 结构（包含模拟的输入框、下拉选项列表）来实现渲染和交互。
你遇到的问题本质是代码执行顺序差异：

• 写在 $(document).ready() 外部的脚本，会在 DOM 解析到当前代码块时立即执行，此时 Materialize 的自动初始化逻辑尚未运行，你追加的 <option> 会被后续的初始化逻辑识别，正常渲染到自定义下拉结构中。
• 写在你自定义的 $(document).ready() 回调中的代码，执行时机晚于 Materialize 的自动初始化逻辑，此时你修改的只是被隐藏的原生 <select> 节点，已经生成的自定义下拉结构不会自动同步原生节点的变更，因此看不到新增选项。

可行解决方案 #

方案1：手动触发下拉组件刷新（推荐） #

在完成 <option> 追加操作后，主动调用 Materialize 提供的 select 组件刷新方法，让自定义渲染结构和原生节点内容同步即可，代码示例如下：

$( document ).ready(function() {
    // 追加自定义选项
    $('#selectid').append(`<option value="10">test1</option>`);
    $('#selectid').append(`<option value="11">test2</option>`);
    $('#selectid').append(`<option value="12">test3</option>`);

    // 根据你使用的 Materialize 版本选择对应刷新代码
    // Materialize 0.x 版本：
    $('#selectid').material_select();
    // Materialize 1.x 版本：
    M.FormSelect.init($('#selectid')[0]);
});

该方案兼容性最强，同时支持页面加载阶段追加选项、运行时动态更新选项两类场景。

方案2：调整脚本执行顺序 #

将你的选项追加逻辑的 <script> 块放在 Materialize 相关 JS 资源的引入代码之前，这样你的 $(document).ready() 回调会先进入执行队列，在 Materialize 自动初始化之前完成选项追加，无需额外调用刷新方法。

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