在 Google Apps 脚本 web 应用程序中动态添加 Materialize select 输入时出错

Question

I try to dynamically add extra Materialize "select"s to a custom form created with a Google Apps Script web app.我尝试将额外的 Materialize“选择”动态添加到使用 Google Apps 脚本 web 应用程序创建的自定义表单中。 Although the initial one displays OK, on adding extra (via the "Add Row" button) the new select has two sets of options.虽然最初的显示 OK，但在添加额外的（通过“添加行”按钮）时，新的 select 有两组选项。

Can anyone see what I am doing wrong?谁能看到我做错了什么？

Demo app 演示应用

Code.gs代码.gs

function doGet(e){
  return HtmlService.createTemplateFromFile("Page").evaluate();
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Page.html页.html

<!DOCTYPE html>
<html>

  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  
  <body onload="onLoad()">
    <div class="container">
      <div class="row">
        <button class="btn waves-effect waves-light" id ="add-row-btn" name="action">Add Row</button>
      </div>
      <form id="invoice-form" name="invoice-form"></form>      
    </div> 

    <!-- template --> 

    <div style="display: none" data-type="template" id="row-template"> 
      <div class="row">
        <div class="input-field col s2">
          <select id="HoursType" name="HoursType">
            <option value="Hours Type" disabled selected name="Hours Type">Hours Type</option>
            <option value="Indirect" name="Indirect">Indirect</option>
            <option value="Direct" name="Direct">Direct</option> 
          </select>
        </div>
      </div> <!-- row -->  
    </div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <?!= include("Page-js"); ?>
  </body>
</html>

Page.js.html Page.js.html

<script>

  var selectorCount = 0

  function onLoad() {
    addRow()
    document.getElementById("add-row-btn").addEventListener("click", addRow);
  }

  function addRow() {
    var documentFragment = document.createDocumentFragment();
    var temporaryNode = document.getElementById('row-template').cloneNode(true); //true for deep clone
    documentFragment.appendChild(temporaryNode)
    document.getElementById('invoice-form').appendChild(documentFragment)
    var elements = document.querySelectorAll('select');
    var element = elements[selectorCount++]
    selector = M.FormSelect.init(element);   
    temporaryNode.style.display = "block"
    delete documentFragment
  }

</script>

Answer 1

About the issue of Although the initial one displays OK, on adding extra (via the "Add Row" button) the new select has two sets of options.关于问题Although the initial one displays OK, on adding extra (via the "Add Row" button) the new select has two sets of options. . . I think that the reason might be that the same id is used in invoice-form appended by appendChild(documentFragment) .我认为原因可能是在appendChild(documentFragment)附加的invoice-form中使用了相同的id 。 So how about the following modification?那么下面的修改呢？

From:从：

function addRow() {
  var documentFragment = document.createDocumentFragment();
  var temporaryNode = document.getElementById('row-template').cloneNode(true); //true for deep clone
  documentFragment.appendChild(temporaryNode)

To:至：

function addRow() {
  var documentFragment = document.createDocumentFragment();
  var temporaryNode = document.getElementById('row-template').cloneNode(true); //true for deep clone

  temporaryNode.id = temporaryNode.id + selectorCount;  // Added

  documentFragment.appendChild(temporaryNode)

Note:笔记：

But I'm not sure whether this is the direction you expect.但我不确定这是否是您期望的方向。 So if this was not the direction you expect, please tell me.因此，如果这不是您期望的方向，请告诉我。 I would like to modify it.我想修改它。

在 Google Apps 脚本 web 应用程序中动态添加 Materialize select 输入时出错

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-05-09 01:49:22

From:从：

To:至：

Note:笔记：

在 Google Apps 脚本 web 应用程序中动态添加 Materialize select 输入时出错

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-05-09 01:49:22

From:从：

To:至：

Note:笔记：

解决方案1
1 已采纳 2020-05-09 01:49:22