Question

我花了好几天才克服这个但没有运气。

我在Google脚本中有一个html页面，我想要一个下拉列表 - 这可以通过以下方式实现

<div>
<select name="source">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</div>

现在，我希望从电子表格中删除选项字段而不是手动输入，如果颜色范围增大或减小，则下拉列表应相应更新。

请做任何变通办法......

此致

Answer 1

您可以查看文档，特别是Pushing section variables to templates，保险可能很有用。

Answer 2

这是对Html Service: Best Practices文档中演示的技术的改编。

Code.gs

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

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

  return htmlOutput;
}

function getListOptions() {
  // In production code, get an array of options by
  // reading a spreadsheet.
  var options = ['Saab','Opel','Audi'];

  return( options );
}

DynamicList.html

<div>
  <select id="optionList">
    <option>Loading...</option>    
  </select>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
// This code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(buildOptionList)
      .getListOptions();
});

function buildOptionList(options) {
  var list = $('#optionList');
  list.empty();
  for (var i = 0; i < options.length; i++) {
    list.append('<option value="' + options[i].toLowerCase() + '">' + options[i] + '</option>');
  }
}
</script>

Answer 3

要显示数组中的元素而不是数组对象本身，需要在Scriptlet标记中包含DATA数组。我认为不需要使用二维数组。正确的语法应该是：

<?
 var sheet   =  SpreadsheetApp.openById(0Avt7ejriwlxudGZfV2xJUGJZLXktQ2RhQU1ugtgtaXc").getSheetByName("MRF Tab");
  var lastRow = sheet.getLastRow();  
  var myRange = sheet.getRange("C3:C"+lastRow); 
  var data    = myRange.getValues();
  ?>
<div>
  <select>
    <? for (var i = 0; i < data.length; ++i) { ?>
      <option><?!= data[i] ?></option>
    <? } ?>
  </select>
</div>

混合使用数据获取代码＆amp;模板中的 html UI 代码。您应该使用单独的gs 和 html文件＆amp;应用Mogsdad建议的优化。

从Google电子表格中捕获HTML选项

3 个答案:

Code.gs

DynamicList.html