如何在使用物化 css 时动态创建 select 选项

Question

我重新提出我的问题，因为我能够解决它的一部分，只需要在某些点上得到帮助。

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

因为我正在使用 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;
}

我的 select 元素是日期名称。["sunday"、"monday"、"tuesday"、"wednesday"、"thursday"、"friday"、"saturday"]。欢迎任何建议。

Answer 1

关于 Materialise CSS 需要 "initalization" 的注释：https://materializecss.com/select.html

初始化

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

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

  // Or with jQuery

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

您可以使用上面的代码批量完成所有这些操作，或者针对每个添加的 select 更单独地进行定位。

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

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>

如何在使用物化 css 时动态创建 select 选项

How to dynamically create select options when using materialize css

html

javascript

materialize