Materialise Init 正在禁用其他 Select 下拉菜单

Question

我在使用 Materialize 时遇到一个问题，并且正在向我的页面动态添加新的 Select 菜单。当我初始化第一组 Select 时，它们工作正常。如果我添加第二组并初始化同一组，则前一组将停止工作。我已经尝试解决这个问题几个小时了，但我不确定我的错误在哪里。

表单是添加 Select 菜单的地方。当我添加第一组选择时，它工作正常。如果我添加第二组，第一组停止工作，我不确定为什么。

function addMesocycle() {
    var form = document.querySelector("#mesocycleForm");
    var name = "Mesocycle " + mesocycleIndex;

    var content = 
    `
        <p>${name}</p>
        <label style="color: rgb(46, 46, 46);">Fase:</label>
        <select id="${"fase" + mesocycleIndex}">
            <option value='Option1' selected>Option1</option>
            <option value='Option2'>Option2</option>
            <option value='Option3'>Option3</option>
            <option value='Option4'>Option4</option>
        </select>
        <br>
        <label style="color: rgb(46, 46, 46);">Período:</label>
        <select id="${"period" + mesocycleIndex}">
            <option value='Option1'>Option1</option>
            <option value='Option2'>Option2</option>
            <option value='Option3'>Option3</option>
            <option value='Option4'>Option4</option>
        </select>
        <br>
    `;

    form.innerHTML += content;

    var faseID = "#fase" + mesocycleIndex;
    var periodID = "#period" + mesocycleIndex;

    var ids = [faseID, periodID];

    var elems = document.querySelectorAll(ids);
    M.FormSelect.init(elems);
    
    mesocycleIndex++;
}

<form id="mesocycleForm"></form>

这是代码笔：https://codepen.io/JoaoBM/pen/MWJdLEB

我不确定是什么导致之前的 Select 被禁用。如果你能帮助我，我将不胜感激。提前致谢。

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
    <form id="mesocycleForm"></form>
    <button onClick="addMesocycle()">Add</button>
</body>
<script>
    var mesocycleIndex = 1;

    function addMesocycle() {
        var form = document.querySelector("#mesocycleForm");
        var name = "Mesocycle " + mesocycleIndex;
        var content =
            `
        <p>${name}</p>
        <label style="color: rgb(46, 46, 46);">Fase:</label>
        <select id="fase${mesocycleIndex}" class="face">
            <option value='Option1' selected>Option1</option>
            <option value='Option2'>Option2</option>
            <option value='Option3'>Option3</option>
            <option value='Option4'>Option4</option>
        </select>
        <br>
        <label style="color: rgb(46, 46, 46);">Período:</label>
        <select id="period${mesocycleIndex}" class="period">
            <option value='Option1'>Option1</option>
            <option value='Option2'>Option2</option>
            <option value='Option3'>Option3</option>
            <option value='Option4'>Option4</option>
        </select>
        <br>
    `;

        form.innerHTML += content;
        // var faseID = "#fase" + mesocycleIndex;
        // var periodID = "#period" + mesocycleIndex;
        // var ids = [faseID, periodID];
        var ids = ['.face', '.period'];
        var elems = document.querySelectorAll(ids);

        M.FormSelect.init(elems);
        mesocycleIndex++;
    }
</script>

</html>

Answer 2

我为以后好奇的人找到了解决方案。

我在 Materialise 的 Github 问题上发布了这个问题，并被告知

”避免使用innerHTML，因为select元素的内部状态会丢失。不使用innerHTML，可以使用insertAdjacentHTML。例如:

form.insertAdjacentHTML('beforeend', content);

IMO，这不是 materializecss 的错误。"

您可以在此处找到 Github 问题：https://github.com/materializecss/materialize/issues/124

这是最后的代码块，使用了@ΑΓΡΙΑ ΠΕΣΤΡΟΦΑ 的部分答案（这样可以更整洁）：

var mesocycleIndex = 1;

function addMesocycle() {
  var form = document.querySelector("#mesocycleForm");
  var name = "Mesocycle " + mesocycleIndex;

  var content =
    `
      <p>${name}</p>
      
      <label style="color: rgb(46, 46, 46);">Fase:</label>
      <select id="fase${mesocycleIndex}" class="fase">
        <option value='Option1'>Option1</option>
        <option value='Option2'>Option2</option>
        <option value='Option3'>Option3</option>
        <option value='Option4'>Option4</option>
      </select>

      <br>

      <label style="color: rgb(46, 46, 46);">Período:</label>
      <select id="period${mesocycleIndex}" class="period">
        <option value='Option1'>Option1</option>
        <option value='Option2'>Option2</option>
        <option value='Option3'>Option3</option>
        <option value='Option4'>Option4</option>
      </select>

      <br>
    `;

  form.insertAdjacentHTML('beforeend', content);

  var ids = ['.fase', '.period'];

  var elems = document.querySelectorAll(ids);

  M.FormSelect.init(elems);

  mesocycleIndex++;
}

你可以在这里看到它的工作：https://codepen.io/JoaoBM/pen/RwpbXRZ

希望这对以后遇到与我相同问题的人有所帮助。

Materialise Init 正在禁用其他 Select 下拉菜单

Materialize Init is disabling other Select dropdown menus

html

javascript

materialize