JavaScript初始化Materialize Select组件无法填充选项如何解决

问题根因 #

你之前的写法混淆了Materialize Autocomplete和FormSelect组件的配置逻辑：Autocomplete支持初始化时传入data参数直接生成下拉候选项，但FormSelect组件不会根据初始化参数自动生成<option>DOM节点，它仅会对已经存在于DOM中的<option>标签做样式封装渲染。

实现步骤 #

• 每次更新前清空原有除默认提示项外的所有<option>节点
• 遍历员工列表，动态生成新的<option>节点并插入到select元素中
• 销毁之前可能存在的FormSelect实例，重新初始化组件让新选项生效

修正后代码 #

function updateClientInfo(clientDataObj){
  clientObj = clientDataObj[0];
  const staffList = clientDataObj[1]; // 对应你原逻辑里的员工列表数组
  const pocSelect = document.getElementById("pocSelect");
  
  // 清空旧选项，保留第一个默认禁用的提示项
  pocSelect.innerHTML = '<option value="" disabled selected>Choose Point of Contact</option>';
  
  // 动态生成option节点插入
  staffList.forEach(staffName => {
    const option = document.createElement("option");
    option.value = staffName;
    option.textContent = staffName;
    // 若需要设置默认选中，可在此处添加 option.selected = true
    pocSelect.appendChild(option);
  });
  
  // 先销毁已有的实例避免重复初始化冲突，再重新初始化FormSelect
  const existingInstance = M.FormSelect.getInstance(pocSelect);
  if(existingInstance) {
    existingInstance.destroy();
  }
  M.FormSelect.init(pocSelect);
}

补充说明 #

如果你需要修改下拉框的全局配置（比如下拉弹窗的类名、是否可多选等），可以在M.FormSelect.init的第二个参数传入对应配置，下拉选项的内容完全由DOM中的<option>节点决定，不需要在初始化参数里传选项列表。

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