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

Jared_C 发表于 Dev

Jared_C

我正在尝试学习Google的HTML Service UI服务，并且正在努力寻找如何从电子表格中的数据更新UI中的下拉列表的方法。我从此Google教程中复制了以下代码，效果很好。但是，如果我想使用和来填充下拉列表和

在下面，它似乎不起作用。

<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>

瑞安·罗斯（Ryan Roth）

以下Apps Script项目文件使用电子表格数据填充UI中的下拉选择框。在主Apps脚本项目文件（默认名称为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>