Question

重新措词的目标：我正在使用Google Apps脚本创建网页。我想在页面上列出多个下拉列表。我知道如果使用<select><option>，我可以创建一个硬编码选项列表。我想做的是从Google工作表中获取要显示在下拉菜单中的选项，这样我可以随时更新它而无需修改HTML代码。

问题：虽然我成功创建了一个包含工作表中A列值的下拉选择，但我遇到了一个问题，即Apps Script无法让我创建另一个包含B列的值。

这是我的工作表，其中包含姓名和饮食类型。每列包含每个下拉菜单的选项。

这是前端的外观。我想在它旁边的另一个下拉菜单中包含来自B列的值（如上所示）。

这是我的剧本：

var url = "google sheets URL";

function doGet(e){

  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Staff");
  var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues();

  var tmp = HtmlService.createTemplateFromFile("index");
  tmp.list = list.map(function(r){ return r[0]; });
  return tmp.evaluate();

}

这是我的选择列表的HTML：

  <select id="app" class="browser-default">
  <option disabled selected>Select a teammate!</option>
  <? for(var i=0;i<list.length;i++){ ?>
  <option><?= list[i]; ?></option>
  <? } ?>
  </select>

这时它可以正常工作，但是当尝试复制它时，我可以在Google表格中抓取另一列并将其用作另一个选择列表，我得到：Referenceerror：未定义“列表”。

这是导致我得到错误的脚本。

var url = "google sheets URL";

function doGet(e){

  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Staff");
  var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues();

  var tmp = HtmlService.createTemplateFromFile("index");
  tmp.list = list.map(function(r){ return r[0]; });
  return tmp.evaluate();

}

function doGet(f){

  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Variables");
  var list2 = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues();

  var tmp2 = HtmlService.createTemplateFromFile("index");
  tmp2.list2 = list2.map(function(r){ return r[0]; });
  return tmp2.evaluate();

}

Answer 1

这是从对话框获取多个列表的简单示例。

加载代码并运行launchDialog（）。您还可以添加doGet（）并使用return HtmlService.createHtmlOutputFromFile('aq4');

Code.gs：

function getList(n) {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet1');
  var rg=sh.getRange(2,n,sh.getLastRow()-1,1);
  return rg.getValues().map(function(r){return r[0]});
}

function launchDialog() {
  var userInterface=HtmlService.createHtmlOutputFromFile('aq4');
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'My List');
}

aq4.html：

<!DOCTYPE html>
<html>
  <head>
  <base target="_top">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    input{margin:5px;}
    td,th{border:1px solid black;}
  </style>
  <script>
    $(function(){
      google.script.run
      .withSuccessHandler(function(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]);
        }
      })
      .getList(1);
    });
    function getAnotherList() {
      google.script.run
      .withSuccessHandler(function(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]);
        }
      })
      .getList(Math.floor(Math.random()*23));
    }
    console.log("My Code");
  </script>
  </head>
<body>
  <select id="sel1"></select>
  <input type="button" value="Get Another List" onClick="getAnotherList();" />
</body>
</html>

这是我的列表电子表格：

创建多个数组列表

1 个答案: