我对HTML和App-Script都是全新的。我在这里的目的是让谷歌工作表中的选项动态列表填充HTML中的列表框,然后当用户选择HTML列表框中的值并点击提交按钮时,将该值导入回App-Script,以便我可以将其附加到另一个googlesheet。任何帮助将不胜感激!
function getValuesFromSpreadsheet() { // Retrieve values from Googlesheet and send to HTML
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues();
}
function update_status() { //Open the HTML Form
var html = HtmlService.createHtmlOutputFromFile('lists')
.setWidth(200)
.setHeight(300);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Update Status');
}
function createAgenda(form) { // Retrieve values from HTML Form
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
var lr = ss.getLastRow();
var text = form.neworder; //attempt to get HTML listbox value
sheet.appendRow([form.neworder]);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<div class="dropdown"></div>
<br>
<form>
Select PO / Order:<br>
<body onload="loadOrders()"></body>
<div id="myDropdown" class="dropdown-content" name="neworder"></div>
<input type="submit" value="Submit" class="submit"
onclick="google.script.run
.withSuccessHandler(google.script.host.close)
.createAgenda(this.parentNode)"/>
</form>
</html>
<script>
function loadOrders() {
google.script.run.withSuccessHandler(function(ar) {
let select = document.createElement("select");
select.id = "select1";
select.setAttribute("onchange", "selected()");
document.getElementById("myDropdown").appendChild(select);
ar.forEach(function(e, i) {
let option = document.createElement("option");
option.value = i;
option.text = e;
document.getElementById("select1").appendChild(option);
});
}).getValuesFromSpreadsheet();
};
function selected() {
const value = document.getElementById("select1").value;
console.log(value);
}
</script>
thisNode
不会返回您期望的内容。它返回所选项的index
,而不是项本身。另外,form
没有属性neworder
,该属性是空字符串""
。我仍然可以通过返回工作表来检索所选值,下面的代码可以工作。大量用于调试的控制台日志。
function getValuesFromSpreadsheet() { // Retrieve values from Googlesheet and send to HTML
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
console.log(JSON.stringify(sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues()));
return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues();
}
function update_status() { //Open the HTML Form
var html = HtmlService.createHtmlOutputFromFile('lists')
.setWidth(200)
.setHeight(300);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Update Status');
}
function createAgenda(form) { // Retrieve values from HTML Form
console.log(JSON.stringify(form));
console.log(form[""]);
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
//var lr = ss.getLastRow();
//var text = form.neworder; //attempt to get HTML listbox value
var selected_order = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data").getRange(form[""]+1, 1).getValue();
sheet.appendRow([selected_order]);
}
解释/问题:
服务器端函数getValuesFromSpreadsheet()
返回一个 2D 数组,而由google.script.run.withSuccessHandler
执行的客户端函数接受ar
,这应该是元素的一维数组。
因此,forEach
循环不会遍历单个值,而是遍历数组。
假设其他一切正常,您需要返回一个 1D 数组。由于您要创建一个下拉列表,因此我认为所需的值也应该是唯一的。因此,我提出以下修改:
var values = sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues().flat();
return [...new Set(values)];
它使用 flat 将数组转换为 1D,并使用 Set 获取唯一值。
溶液:
将服务器端getValuesFromSpreadsheet
函数替换为:
function getValuesFromSpreadsheet() { // Retrieve values from Googlesheet and send to HTML
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
var values = sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues().flat();
return [...new Set(values)];
}