从应用程序脚本中的电子表格更新下拉列表答案

【问题标题】：update dropdown from spreadsheet in apps script从应用程序脚本中的电子表格更新下拉列表
【发布时间】：2014-01-27 21:50:00
【问题描述】：

我正在尝试学习 Google 的 HTML Service UI 服务，并且正在努力弄清楚如何从电子表格中的数据更新 UI 中的下拉列表。我从this Google Tutorial 复制了以下代码，效果很好。但是，如果我想使用 and 来填充下拉列表并替换 and

下面，它似乎不起作用。

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

【问题讨论】：

标签： javascript jquery html google-apps-script

【解决方案1】：

以下 Apps 脚本项目文件使用电子表格数据填充 UI 中的下拉选择框。在主 Apps Script 项目文件（默认名称为 Code.gs）中，包括：

function doGet(request) {
  return HtmlService.createTemplateFromFile('DropDown')
         .evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE); 
}


function getMenuListFromSheet() {
  return SpreadsheetApp.openById(*SPREADSHEET_ID*).getSheets()[0]
         .getRange(2,1,4,1).getValues();  
}

您需要将 *SPREADSHEET_ID* 替换为包含要用于填充选择框的数据的电子表格的 ID。此示例将第一个工作表的 A2:A5 范围中的数据作为要使用的数据（在 getRange() 函数中定义）。

另请注意，此示例使用 NATIVE 沙盒模式，它比默认的 EMULATED 模式更宽容。

此示例还需要 Apps 脚本项目中的 HTML 文件（此处命名为“DropDown.html”）：

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<select id="menu">
  <option></option>
  <option>Google Chrome</option>
  <option>Firefox</option>
</select>


<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getMenuListFromSheet();
  google.script.run.withSuccessHandler(showMenu)
      .getMenuListFromSheet();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}

function showMenu(menuItems) {
  var list = $('#menu');
  list.find('option').remove();  // remove existing contents

  for (var i = 0; i < menuItems.length; i++) {
    list.append('<option>' + menuItems[i] + '</option>');
  }
}

</script>

此 HTML 文件由一个列表和一个选择框组成，两者都具有默认内容。页面加载后，两者的内容都会被 getMenuListFromSheet() 函数提供的内容替换，该函数从电子表格中提取其返回值。

您可以创建这些绑定到电子表格容器的 Apps 脚本项目文件，然后将它们发布为 Web 应用程序。

【讨论】：