从 Google 表格填充 HTML 表单答案

【问题标题】：Populate HTML form from Google Sheets从 Google 表格填充 HTML 表单
【发布时间】：2016-08-27 22:34:03
【问题描述】：

我对这一切都很陌生，但我希望直接使用 Google 电子表格中的名称填充 Apps Script Web App HTML 下拉表单条目。到目前为止，我已经能够从电子表格的 A 列返回一个名称数组。此外，JS 的“填充表单”部分成功填充了 HTML 表单。

我的问题是如何将两者联系起来？我尝试用函数 getColleagueList() 替换 JS 后半部分中的硬编码数组，并删除该函数，只留下变量，表单仍然没有填充。我觉得它是一个简单的解决方案，但不知道该怎么做。提前致谢。

<!DOCTYPE html>
<html>
<head>
</head>
  <body>


  <select id="selectColleague">
    <option disabled selected value="">
      Reviewer's Name
    </option>
  </select> 

  <script type="text/javascript">

  //Gets Names
  function getColleagueList() {
     var s1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Roster Import');
     var range = s1.getRange(2, 1,s1.getLastRow()-1, 1).getValues();
     return range;
  }


  //Populates Form
  var select = document.getElementById("selectColleague");
  var options = ["1", "2", "3", "4", "5"];
    for(var i = 0; i < options.length; i++) {
      var opt = options[i];
      var el = document.createElement("option");
       el.textContent = opt;
       el.value = opt;
       select.appendChild(el);
  }
 </script>

【问题讨论】：

您的 HTML 是否位于非 Google 网站中？ Google 电子表格的侧边栏？ Apps 脚本 Web 应用程序？ Google 网站？
@Sandy_Good 一个 Apps 脚本 Web 应用

标签： javascript jquery html google-apps-script

【解决方案1】：

getColleagueList() 应该是一个服务器端函数。你可以把它放在 Code.gs 文件中。然后从 JavaScript 调用服务器端函数，如下所示：你可以在这里了解更多：https://developers.google.com/apps-script/guides/html/communication

<script>
          function onSuccess(values) {
            var select = document.getElementById("selectColleague");
            var options = values[0]; //Two dimensional array
            for(var i = 0; i < options.length; i++) {
                var opt = options[i];
                var el = document.createElement("option");
                el.textContent = opt;
                el.value = opt;
                select.appendChild(el);
            }
          }

          google.script.run.withSuccessHandler(onSuccess)
              .getColleagueList();
</script>

【讨论】：

【解决方案2】：

@HariDas 对后端 .gs 代码给出了很好的回答，并且一切正常。您的网络应用程序代码也很好，只是需要进行一些更改：

    var options = values[0]; 
    //change it to:
    var options = values;

现在将遍历数组并给出所有结果，如下所示： Web App

希望有帮助:) 祝你好运！

【讨论】：