Как динамически создавать параметры выбора при использовании 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;
}

Мои выбранные элементы - это названия дней. ["Sunday", "monday", "tuesday", «среда», «четверг», «пятница», «суббота»]. Любые предложения приветствуются.

Answer 1

Примечание по материализации CSS neding «инициализация»: https://materializecss.com/select.html

Initialization

Вы должны инициализировать выбранный элемент как показано ниже. Кроме того, вам потребуется отдельный вызов для любых динамически сгенерированных элементов выбора, которые генерирует ваша страница.

  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>