如何让动态添加的MaterializeCSS下拉菜单正常渲染？

问题根源 #

Materialize的FormSelect组件依赖JavaScript初始化才能渲染出样式化的下拉菜单。页面加载时仅初始化了当时存在的静态select元素，而动态新增的select未触发初始化，导致无法正常显示。此外，输入框的label缺少对应id绑定，会影响交互体验。

修复方案 #

1. 动态添加元素后初始化新select #

在addInputField函数末尾，添加代码初始化刚创建的三个下拉菜单：

// 初始化新添加的select元素
M.FormSelect.init(newOrderTypeSelectElem);
M.FormSelect.init(newProductSelectElem);
M.FormSelect.init(newUnitSelectElem);

2. 绑定输入框label的for属性 #

创建数量输入框的label时，设置其for属性对应输入框的id，确保Materialize标签交互正常：

// 创建数量输入框的label并绑定对应id
const qtyId = 'productqty' + counter.toString();
const newQtyLabelElem = createElementTemplate('label');
newQtyLabelElem.textContent = "Quantity";
newQtyLabelElem.setAttribute('for', qtyId);

3. 修正初始化代码的未定义参数 #

原DOM加载事件中的options参数未定义，移除该参数避免报错：

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

修改后的完整js_scripts_materialize.html代码 #

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

  let counter = 0;

  const orderTypeList = ["PH", "ECOM"];
  const optionList = ["Test Product 1", "Test Product 2", "Test Product 3", "Test Product 4", "Test Product 5"];                                   
  const unitOptionList = ["KGS", "PCS", "BAGS"];
  
  document.getElementById("addproduct").addEventListener("click", addInputField);

  function addInputField(){
    counter++;
    
    // 创建row容器
    const newDivElem = createElementTemplate('div', null, ['row']);

    // 创建订单类型下拉
    const newOrderTypeSelectElem = createElementTemplate('select', "ordertype" + counter.toString());
    createOptionsElem(newOrderTypeSelectElem, orderTypeList);

    // 创建产品下拉
    const newProductSelectElem = createElementTemplate('select', "product" + counter.toString());
    createOptionsElem(newProductSelectElem, optionList);

    // 创建数量输入框
    const qtyId = 'productqty' + counter.toString();
    const newQtyInputElem = createElementTemplate('input', qtyId, ['validate']);
    newQtyInputElem.type = 'text';

    // 创建数量输入框的label并绑定id
    const newQtyLabelElem = createElementTemplate('label');
    newQtyLabelElem.textContent = "Quantity";
    newQtyLabelElem.setAttribute('for', qtyId);

    // 创建单位下拉
    const newUnitSelectElem = createElementTemplate('select', 'productqtyunit' + counter.toString());
    createOptionsElem(newUnitSelectElem, unitOptionList);

    // 创建内部input-field容器
    const innerDivElems = [];
    for(let i = 0; i < 4; i++){
      innerDivElems.push(createElementTemplate('div', `div${(Number(i) + 1)}`, ['input-field', 'col', 's3']));
    }
    
    innerDivElems[0].appendChild(newOrderTypeSelectElem);
    innerDivElems[1].appendChild(newProductSelectElem);
    innerDivElems[2].appendChild(newQtyInputElem);
    innerDivElems[2].appendChild(newQtyLabelElem);
    innerDivElems[3].appendChild(newUnitSelectElem);

    // 组装row并添加到页面
    for(let i in innerDivElems){
      newDivElem.appendChild(innerDivElems[i]);
    }
    document.getElementById('productsection').appendChild(newDivElem);

    // 初始化新添加的select元素
    M.FormSelect.init(newOrderTypeSelectElem);
    M.FormSelect.init(newProductSelectElem);
    M.FormSelect.init(newUnitSelectElem);
  }

function createOptionsElem(selectElem, optionsArr){
  const newDefaultOptionElem = document.createElement('option');
  newDefaultOptionElem.disabled = true;
  newDefaultOptionElem.setAttribute('selected', true);
  newDefaultOptionElem.textContent="Choose your option";

  selectElem.appendChild(newDefaultOptionElem);

  for(let i in optionsArr){
    const newOptionElem = document.createElement('option');
    newOptionElem.textContent = optionsArr[i];
    newOptionElem.value = optionsArr[i];
    selectElem.appendChild(newOptionElem);
  }
}

function createElementTemplate(tagType, idVal, classNameList){
  const newElement = document.createElement(tagType);
  
  if(idVal !== undefined)
    newElement.id = idVal;
  
  if(classNameList !== undefined){
    for(let i in classNameList){
      newElement.classList.add(classNameList[i]);
    }
  }

  return newElement;
}
</script>

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