[英]google apps script html select options loaded from spreadsheet data
New to google apps scripting, javascript, etc... 谷歌应用程序脚本,javascript等新...
Trying to create a sidebar in a spreadsheet that contains an html select object that is populated from a column in one of the sheets. 尝试在电子表格中创建侧边栏,其中包含从其中一个工作表中的列填充的html选择对象。
I've tried using code that I found in this post , but the function to load the options doesn't appear to be executing when the html is loaded. 我已经尝试使用我在这篇文章中找到的代码,但加载html时加载选项的功能似乎没有执行。 Any idea what I'm doing wrong? 知道我做错了什么吗?
code in code.gs: code.gs中的代码:
function onOpen(e) {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('USD Conversion')
.addItem('Convert Dollars to Foreign Currency', 'showSidebar')
.addToUi();
var ss = SpreadsheetApp.getActiveSpreadsheet();
var csvMenuEntries = [{name: "Load rates from CSV file", functionName: "importFromCSV"}];
var addCountriesMenuEntries = [{name: "Add Countries", functionName: "addCountries"}];
var conversionEntries = [{name: "Convert Dollars for Foreign Currency", functionName: "showSidebar"}];
}
/**
* Opens a sidebar in the document containing the add-on's user interface.
*/
function showSidebar() {
var template = HtmlService
.createTemplateFromFile('Sidebar')
var htmlOutput = template.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('USD Conversion')
.setWidth(400);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showSidebar(htmlOutput);
}
function getListOptions() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("CountryCodes");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("P2:P"+lastRow);
var countries = myRange.getValues();
return( countries );
}
code in Sidebar.html: Sidebar.html中的代码:
<div class="labels">
<p>Destination Country:</p>
</div>
<div>
<select name="optionList">
<option>Loading...</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function () {
google.script.run.withSuccessHandler(buildOptionList)
.getListOptions();
});
function buildOptionList(countries) {
var list = $('#optionList');
list.empty();
for (var i = 0; i < countries.length; i++) {
list.append(countries[i]);
}
}
</script>
To reference your select list in jQuery by id, the select element needs an id attribute <select id="optionList" name="optionList">
. 要通过id引用jQuery中的选择列表,select元素需要一个id属性<select id="optionList" name="optionList">
。 To add an option to an option list, you can use the following syntax: list.append(new Option(countries[i],countries[i]));
要向选项列表添加选项,可以使用以下语法: list.append(new Option(countries[i],countries[i]));
where the fist value is the name and the second is the value. 其中,第一个值是名称,第二个值是值。
You Google Script code looks good but you could add Logger.log(countries);
您的Google脚本代码看起来不错,但您可以添加Logger.log(countries);
right before your return statement to validate that you are returning the expected results. 在您的退货声明之前,以验证您是否正在返回预期结果。 Within your Google Script editor, you can test a function by clicking Run -> (function name) than click View -> Logs to view the logs. 在Google脚本编辑器中,您可以通过单击运行 - >(功能名称)来测试功能,然后单击查看 - >日志以查看日志。 It's best to test your Google Script code and HTML code separately before trying to use them together. 在尝试一起使用之前,最好分别测试您的Google Script代码和HTML代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.