Materialize CSS：动态向选择列表添加选项的技术问题

看你这段代码，我发现几个关键问题，咱们一步步来修正：

1. 修正选项标签的转义问题 #

你写的$('<option></option>')是HTML转义后的字符，jQuery无法正确识别并创建元素，得改成原生的标签字符串：

var option = $('<option></option>');

2. 补全并重新初始化选择组件 #

Materialize的自定义选择UI不会自动感知动态添加的选项，所以在填充完选项后必须重新调用material_select()方法来更新UI——你代码里的material_selec...明显是没写完，要补全为完整的方法调用：

$('.select-person').material_select();

3. 确保函数被调用且people数组存在 #

别忘了要调用populateSelect函数，同时要保证people这个对象数组是已定义的（比如在全局或函数可访问的作用域内）。

完整修正后的代码 #

window.$ = window.jQuery = require('jquery');

// 示例people数组，你可以替换成自己的数据源
const people = [
  { name: 'Alice' },
  { name: 'Bob' },
  { name: 'Charlie' }
];

$(document).ready(function() {
  // 初始化页面上的所有选择组件
  $('select').material_select();
  // 调用填充函数
  populateSelect();
});

function populateSelect() {
  $('.select-person').empty();
  // 可选：添加一个默认提示选项
  $('.select-person').append('<option value="" disabled selected>选择人员</option>');
  
  people.forEach(function(person, index) {
    var option = $('<option></option>');
    option.val(index); // 也可以用person.id这类唯一标识，根据你的需求调整
    option.text(person.name);
    $('.select-person').append(option);
  });
  
  // 重新初始化选择组件，让Materialize识别新选项
  $('.select-person').material_select();
}

额外提示 #

• 如果你的people数据是异步获取的（比如从API请求），一定要在数据返回后再调用populateSelect，不然数组为空会导致填充失败。
• 要确保HTML结构符合Materialize的要求，原生<select>需要搭配对应的<label>，示例结构如下：

<div class="input-field">
  <select class="select-person">
  </select>
  <label>选择人员</label>
</div>

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