如何填充HTML服务从Google表格的范围中选择选项? [英] How to Populate HTML Service Select Options from Range in Google Sheet?
问题描述
我正在尝试使用正在使用的Google表格中供应商数据库"标签的A列中包含的所有条目填充HTML服务下拉/选择选项列表.但是，在运行时，它当前显示为空白.有什么建议?
I am trying to populate my HTML Service drop down/select option list with all entries included in column A of my Vendor Database tab in the Google Sheet I am working with. It is currently showing up blank, though, when running. Any suggestions?
应用脚本:
function getVendors() {
var active = SpreadsheetApp.getActive();
var sheet = active.getSheetByName("Vendor Database");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("A2:A" + lastRow);
var data = myRange.getValues();
var optionsHTML += "";
for (var i = 0; i < data.length;i+=1) {
optionsHTML = '<option>' + data[i][0] + '</option>';
};
return optionsHTML;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form>
<div>
<select>
<option> != google.script.run.getVendors(); </option>
</select>
</div>
</form>
</body>
</html>
推荐答案
初始化optionsHTML时应直接分配，而不是+=.相反，请在for循环中使用+=，否则您将替换optionsHTML的内容，而不是附加到该内容.
When initializing optionsHTML that should be direct assignment, not +=. Instead, use the += in the for loop as you'll otherwise be replacing the contents of optionsHTML rather than appending to it.
function getVendors() {
var active = SpreadsheetApp.getActive();
var sheet = active.getSheetByName("Vendor Database");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("A2:A" + lastRow);
var data = myRange.getValues();
var optionsHTML = "";
for (var i = 0; i < data.length; i+=1) {
optionsHTML += '<option>' + data[i][0] + '</option>';
};
return optionsHTML;
}
确保正确评估HTML.由于设置方法的不同，您需要将HTML文件(我假设它称为Index.html)作为模板.
Make sure you're correctly evaluating the HTML. Because of the way you've set this up, you need to treat your HTML file (I'm assuming it's called Index.html) as a template.
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate()
}
最后，在HTML文件中，看起来您使用的是不完整的锚点.应该为<?!= ... ?>，然后直接调用该函数. (另外，请删除周围的<option></option>标签，因为getVendors()已经提供了这些标签.)
Finally, in the HTML file, looks like you're using incomplete anchors. Should be <?!= ... ?> and then call the function directly. (Also, remove the surrounding <option></option> tags as getVendors() already provides those.)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form>
<div>
<select>
<?!= getVendors(); ?>
</select>
</div>
</form>
</body>
</html>
工作完成后，如果有必要花更多的时间和精力在这里，请重构以遵循最佳做法，并
Once you have that working, and if it makes sense to put some more time and care into this, refactor to follow the best practices and load data asynchronously, not in templates by using a client-side script inside the HTML as mentioned by @Cooper.
这篇关于如何填充HTML服务从Google表格的范围中选择选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
