Javascript 在Google Apps脚本web app中动态添加Materialize select输入时出错_Javascript_Html_Google Apps Script_Materialize

Javascript 在Google Apps脚本web app中动态添加Materialize select输入时出错

javascript html google-apps-script

Javascript 在Google Apps脚本web app中动态添加Materialize select输入时出错,javascript,html,google-apps-script,materialize,Javascript,Html,Google Apps Script,Materialize,我尝试动态地将额外的Materialize“select”添加到使用Google应用程序脚本web应用程序创建的自定义表单中。虽然初始选项显示OK，但在添加额外选项时（通过“添加行”按钮），new select有两组选项有人能看出我做错了什么吗代码.gs function doGet(e){ return HtmlService.createTemplateFromFile("Page").evaluate(); } function include(filen

我尝试动态地将额外的Materialize“select”添加到使用Google应用程序脚本web应用程序创建的自定义表单中。虽然初始选项显示OK，但在添加额外选项时（通过“添加行”按钮），new select有两组选项

有人能看出我做错了什么吗

代码.gs

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

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

Page.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

<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>


变量选择器计数=0
函数onLoad（）{
addRow（）
document.getElementById（“添加行btn”）.addEventListener（“单击”，添加行）；
}
函数addRow（）{
var documentFragment=document.createDocumentFragment（）；
var temporaryNode=document.getElementById（'row-template'）.cloneNode（true）；//对于深度克隆为true
documentFragment.appendChild（临时节点）
document.getElementById（'invoice-form'）.appendChild（documentFragment）
var elements=document.querySelectorAll（'select'）；
变量元素=元素[selectorCount++]
选择器=M.FormSelect.init（元素）；
temporaryNode.style.display=“块”
删除文档片段
}

关于

的问题尽管初始选项显示OK，但在添加额外选项时（通过“添加行”按钮），new select有两组选项。

。我认为原因可能是

appendChild（documentFragment）

附加的

invoice表单中使用了相同的id
。那么下面的修改呢
发件人：
致：
注:

但我不确定这是否是你所期望的方向。所以如果这不是你期望的方向，请告诉我。我想修改它
它不应该是元素[++选择器或计数]？
function addRow() {
  var documentFragment = document.createDocumentFragment();
  var temporaryNode = document.getElementById('row-template').cloneNode(true); //true for deep clone
  documentFragment.appendChild(temporaryNode)

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)