使用materialize css时如何动态创建选择选项

Question

我正在回答我的问题，因为我能够解决其中的一部分，并且只需要在某些方面提供帮助。

除了<select> 元素之外，我能够动态填充表格的其余内容。

因为我正在使用 Materialize css，所以我在创建它时遇到了麻烦。

document.addEventListener('DOMContentLoaded', function(){


google.script.run.withSuccessHandler(getLeaveRosterData).loadRoster();
 var elems = document.querySelectorAll('select');
 var instances = M.FormSelect.init(elems);

});

let weeksArray = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

dataArray.forEach(function(ele) 
{
  const tableRow = document.createElement("tr");

  var agentTD = document.createElement("td");
  agentTD.setAttribute("id", "agent"+ ele);
  var t = document.createTextNode(ele);
  agentTD.appendChild(t);

  var w1TD = document.createElement("td");
  w1TD.appendChild(createDropdown("w1-" + ele));

   // create td elements with unique ids
  var w2TD = document.createElement("td");
  w2TD.appendChild(createDropdown("w2-" + ele));

  tableRow.appendChild(agentTD);
  tableRow.appendChild(w1TD);
  tableRow.appendChild(w2TD);
  tbody.appendChild(tableRow);

});
function createDropdown(id) {
  //create a radio button
  var fragment = document.createDocumentFragment();
  var select = document.createElement('select');
  select.setAttribute("id", id);
  weeksArray.forEach(function (day) {
    select.options.add( new Option(day, day));
  });
  fragment.appendChild(select);
  return fragment;
}

我的选择元素是日期名称。[“星期日”、“星期一”、“星期二”、“星期三”、“星期四”、“星期五”、“星期六”]。欢迎提出任何建议。

Answer 1

关于Materialize CSS neding“初始化”的说明：https://materializecss.com/select.html

初始化

您必须初始化选择元素，如下所示。此外，您需要单独调用页面生成的任何动态生成的选择元素。

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('select').formSelect();
  });

您可以使用上述代码批量执行所有操作，也可以单独针对每个添加的选择。

---

您发布的代码缺少一些使其可测试的参考，但我已经添加了这些，但基本上可以按原样执行您正在寻找的内容。您可以在此处运行此浏览器以确认选择列表已呈现。

let weeksArray = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

const dataArray = ['example 1', 'example 2'];
const tbody = document.querySelector('tbody');

dataArray.forEach(function(ele) 
{
  const tableRow = document.createElement("tr");

  var agentTD = document.createElement("td");
  agentTD.setAttribute("id", "agent"+ ele);
  var t = document.createTextNode(ele);
  agentTD.appendChild(t);

  var w1TD = document.createElement("td");
  w1TD.appendChild(createDropdown("w1-" + ele));

   // create td elements with unique ids
  var w2TD = document.createElement("td");
  w2TD.appendChild(createDropdown("w2-" + ele));

  tableRow.appendChild(agentTD);
  tableRow.appendChild(w1TD);
  tableRow.appendChild(w2TD);
  tbody.appendChild(tableRow);

});
function createDropdown(id) {
  //create a radio button
  var fragment = document.createDocumentFragment();
  var select = document.createElement('select');
  select.setAttribute("id", id);
  weeksArray.forEach(function (day) {
    select.options.add( new Option(day, day));
  });
  fragment.appendChild(select);
  return fragment;
}

<table>
  <tbody>
  </tbody>
</table>