Question

我有一个Google Apps脚本网络应用，其中包含一个带有几个下拉列表的HTML表单。当用户提交他们的选择时，函数会在Google电子表格中查找它们并返回数组中的相应值。这个数组可以有任何长度，我无法将其显示为HTML列表而没有设置列表长度。

我有这个GAS脚本：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function discern(formObject) {

  var stage = formObject.stage;
  var service = formObject.service;

  var ss = SpreadsheetApp.openById(ID);
  var dataSheet = ss.getSheetByName('Sheet1');
  var dataRange = dataSheet.getDataRange();
  var data = dataRange.getValues();
  var array = [];
  for(var i = 0; i < data.length; i++) {
    if(data[i][1].indexOf(stage) > -1) {
      if(data[i][2].indexOf(service) > -1) {
        array.push(data[i][0]);
      }
    }
  }
  return array;
}

这个HTML：

<script>
  function printList(array) {
    var div = document.getElementById('results');
    var list = HtmlService.createHtmlOutput('<ul>');
    for (var i = 0; i < array.length; i++) {
      list.append('<li>' + array[i] + '</li>');
    }
    list.append('</ul>');  
  }

</script>

<form id="myForm">

  <h3>Farming Stage</h3><br>
  Select your farming stage.<br>
  <select name="stage">
  <option etc etc etc
  </select><br>

  <h3>Services</h3><br>
  Select the service for which you are looking<br>
  <select name="service">
  <option value= etc etc etc</option>
  </select><br>

  <br><input type="button" value="Discern"
      onclick="google.script.run
          .withSuccessHandler(printList)
          .discern(this.parentNode)"/>
</form>
<ul id="results"></ul>

（我用＆＃34替换了一些部分;等等＃34;以节省空间。表单本身不是问题。）

无论如何，现在应用程序什么都不返回。之前我将printList函数设为：

function printList(array) {
    var div = document.getElementById('output');
    div.innerHTML =
    '<ul><li>' + array[0] + 
    '</li><li>' + array[1] + 
    '</li><li>' + array[2] + 
    '</li><li>' + array[3] + 
    '</li><li>' + array[4] + 
    '</li></ul>';
  }

此版本有效，但仅限于5个列表插槽，未使用的插槽显示为＆＃34;未定义，＆＃34;这很烦人。

有没有人有任何建议？我是否接近＆＃39; for＆＃39;在我的printList函数中循环？还有另一个简单的方法吗？我非常感谢任何帮助或反馈。

谢谢，比尔

Answer 1

你得到div results你的意思是将列表附加到HTML吗？

<script>
  function printList(array) {
    var div = document.getElementById('results');
    var list = HtmlService.createHtmlOutput('<ul>');
    for (var i = 0; i < array.length; i++) {
      list.append('<li>' + array[i] + '</li>');
    }
    list.append('</ul>');  
    // ? 
    div.innerHTML = list.getContent();
  }

</script>

编辑此外，我认为你需要html对象的getContents。

您无法使用HTMLService。就个人而言，当我使用它时，我从未按照我想要的方式工作。（几年前）。

为什么不使用你的循环，只需将字符串附加到div就像这样。

  <script>
      function printList(array) {
        var div = document.getElementById('results');
        var list = '<ul>');
        for (var i = 0; i < array.length; i++) {
          list += '<li>' + array[i] + '</li>';
        }
        list += '</ul>';  
        div.innerHTML = list;
      }

    </script>

Answer 2

无论出于何种原因，当我这样做时它起作用了：

...<br><input type="button" value="Discern"
      onclick="google.script.run
          .withSuccessHandler(showThings)
          .discern(this.parentNode)"/>
</form>

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

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

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

从表单谷歌应用程序脚本Web应用程序动态列表

2 个答案: