[英]Error dynamically adding Materialize select input in Google Apps Script web app
我嘗試將額外的 Materialize“選擇”動態添加到使用 Google Apps 腳本 web 應用程序創建的自定義表單中。 雖然最初的顯示 OK,但在添加額外的(通過“添加行”按鈕)時,新的 select 有兩組選項。
誰能看到我做錯了什么?
代碼.gs
function doGet(e){
return HtmlService.createTemplateFromFile("Page").evaluate();
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
頁.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>
關於問題Although the initial one displays OK, on adding extra (via the "Add Row" button) the new select has two sets of options.
. 我認為原因可能是在appendChild(documentFragment)
附加的invoice-form
中使用了相同的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)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.