使用 HTML 服务从谷歌电子表格填充下拉列表值答案

【问题标题】：populating dropdown list values from google spreadsheet using HTML service使用 HTML 服务从谷歌电子表格填充下拉列表值
【发布时间】：2015-08-01 07:32:36
【问题描述】：

您好，我正在尝试使用 html 和 google 脚本获取下拉列表。列表的值应从谷歌电子表格中填充。在stackoverflow上搜索了很多之后，我管理了下面的代码。但我仍然无法从电子表格中获取数据作为下拉选项。没有错误，但我只是得到一个空白的保管箱作为输出

电子表格链接：https://docs.google.com/spreadsheets/d/1qaxzTWRf4_xDhfkf-_S9Zr2m-M-9blOcpFBt4JyT5do/edit#gid=0

code.gs

function doGet() {
  var template = HtmlService.createTemplateFromFile('Index');

  var htmlOutput = template.evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);

  return htmlOutput;
}

html代码

< select id = "something" > < option > Choose a option < /option>
</select > < body onload = "addList()" > < /body>
<script>
function addList(){
  var sheet = SpreadsheetApp.openById('1qaxzTWRf4_xDhfkf-_S9Zr2m-M-9blOcpFBt4JyT5do').getSheetByName('Sheet1');
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("C2:C" + lastRow);
  var options = new Array()
  var select = document.getElementById("something");
  var data = myRange.getValues();

  for(var i = 0; i < lastRow; i++) {
    options.push(data[i]);
  }

  for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    var el = document
    el.text = opt;
    el.value = opt;
    select.appendChild(el);
  }
</script >

【问题讨论】：

查看 htmlService 官方文档。您正在将客户端与永远无法工作的服务器代码混合在一起。文档很好地解释了如何做到这一点（从客户端调用服务器函数，或将数据作为模板的一部分）
HTML select option to be captured from Google Spreadsheet的可能重复

标签： html drop-down-menu google-apps-script google-sheets html-select

【解决方案1】：

您需要完全重构您的代码。应该是这样的：

索引.html

<select id="something">
  <option> Choose a option </option>
</select >

<body onload = "addList()"></body>

<script>
  function addList() {
    console.log('addList ran!');

    google.script.run
      .withFailureHandler(onFailure)
      .withSuccessHandler(injectMyContent)
      .getDropDownContent();
  };

  window.injectMyContent = function(argReturnedData) {
    for(var i = 0; i < argReturnedData.length; i++) {
      var opt = argReturnedData[i];
      var el = document.createElement("option");
      var el = document
      el.text = opt;
      el.value = opt;
      select.appendChild(el);
    };
  };

  window.onFailure = function(err) {
    alert('There was an error! ' + err.message);
  };

</script >

代码.gs

function getDropDownContent() {
  var sheet = SpreadsheetApp.openById('Your SS ID').getSheetByName('Sheet1');
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("C2:C" + lastRow);
  var options = new Array()
  var select = document.getElementById("something");
  var data = myRange.getValues();

  for(var i = 0; i < lastRow; i++) {
    options.push(data[i]);
  }

  return options;
};

请注意，此代码仍有错误。我只是为你提供一个起点。我没有提供完美的代码或为你做所有的工作。程序流程的基本结构正确，所有功能都被触发。我没有弄清楚注入下拉菜单的细节。那里有一个错误。看看你能不能弄明白。或者也许其他人可以添加评论。

【讨论】：