Question

我正在尝试使用我正在使用的Google表格中的“供应商数据库”标签的A列中包含的所有条目填充我的HTML服务下拉列表/选择选项列表。但是，它在运行时目前显示为空白。有什么建议？

APPS SCRIPT：

 function getVendors() {
  var active = SpreadsheetApp.getActive();
  var sheet = active.getSheetByName("Vendor Database");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" + lastRow); 
  var data    = myRange.getValues();
  var optionsHTML += "";
  for (var i = 0; i < data.length;i+=1) {
   optionsHTML = '<option>' + data[i][0] + '</option>';
  };
  return optionsHTML;
 }

HTML：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
   <body>
 <form>
 <div>
   <select>
       <option> != google.script.run.getVendors(); </option>
      </select>
</div>
</form>
  </body>
</html>

Answer 1

初始化optionsHTML应该是直接分配，而不是+=。相反，请在for循环中使用+=，否则您将替换optionsHTML的内容而不是附加到它。

function getVendors() {
  var active = SpreadsheetApp.getActive();
  var sheet = active.getSheetByName("Vendor Database");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" + lastRow); 
  var data    = myRange.getValues();
  var optionsHTML = "";
  for (var i = 0; i < data.length; i+=1) {
    optionsHTML += '<option>' + data[i][0] + '</option>';
  };
  return optionsHTML;
}

确保您正确评估HTML。由于你设置它的方式，你需要将你的HTML文件（我假设它叫做Index.html）作为模板。

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
}

最后，在HTML文件中，看起来你正在使用不完整的锚点。应为<?!= ... ?>，然后直接调用该函数。（另外，删除周围的<option></option>标记，因为getVendors()已经提供了这些标记。）

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <form>
    <div>
      <select>
        <?!= getVendors(); ?>
      </select>
    </div>
  </form>
</body>
</html>

一旦你有了这个工作，并且如果有更多的时间和关注是有意义的，重构遵循最佳实践和load data asynchronously, not in templates使用HTML中提到的HTML中的客户端脚本库珀。

Answer 2

这是我过去做过的类似事情。

这是html文件中的Javascript：

$(function() {
        $('#txt1').val('');
        google.script.run
          .withSuccessHandler(updateSelect)
          .getSelectOptions();
      });

    function updateSelect(vA)
    {
      var select = document.getElementById("sel1");
      select.options.length = 0; 
      for(var i=0;i<vA.length;i++)
      {
        select.options[i] = new Option(vA[i],vA[i]);
      }
    }

以下是相关的HTML：

<select id="sel1"  class="control" style="width:255px;height:35px;margin:10px 0 10px 0;">
      <option value="" selected></option>
   </select>

以下是google脚本：

function getSelectOptions()
{
  sortOptions();
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Options');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var options=[];
  for(var i=0;i<vA.length;i++)
  {
    options.push(vA[i][0]);
  }
  return vA;
}

如何填充HTML服务从Google表格中选择Range中的选项？

2 个答案: