从 Google 表格创建 HTML 下拉列表时遇到问题

时间:2021-06-26 22:48:49

标签: html google-sheets dropdown

刚接触 Google 脚本。尝试创建一个带有下拉列表的表单,其中填充了 Google 表格之一。

我在网上找到了几个这样的例子,并尝试在 Sheets 的侧边栏上创建一个下拉列表。电子表格有一个名为“CARS”的选项卡。另外,我运行了为下拉列表生成值的 Code.gs,它正在运行。

但是,侧边栏没有显示下拉列表。这是我正在使用的两个文件(HTML 和 gs)。谢谢。

Code.gs

function getList() {
  console.log('cars')
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var carSheet = ss.getSheetByName("CARS");
  var LastRow = carSheet.getLastRow();
  console.log(LastRow)
  return carSheet.getRange(2,1,LastRow - 1, 2).getValues(); 
}

function startForm() {
  var form = HtmlService.createHtmlOutputFromFile('dropdownList');
  SpreadsheetApp.getUi().showSidebar(form);
}

function addMenu() {
  var menu = SpreadsheetApp.getUi().createMenu('Custom');
  menu.addItem('Dropdown List', 'startForm');
  menu.addToUi();
}
function onOpen(e)
{
  addMenu();
}

dropdownList.html



<!DOCTYPE html>
<script>
  function loadCars() {
    google.script.run.withSuccessHandler(function(ar))
    console.log('in loadcars')
    {
      var carsSelect = document.getElementById("cars");
      console.log(ar)

      let option = document.createElement("option");
      option.value = "";
      option.text = "";
      carsSelect.appendChild(option);

      ar.forEach(function(item,index)
      {
        let option = document.createElement("option");
        option.value = item[1];
        option.text = item[0];
        carsSelect.appendChild(option);
      });

    }).getList();
  };
  function onSelect()
  {
    var carID = document.getElementById("cars").value;
    document.getElementById("carValue").innerHTML = carID;
  };
</script>
<html>
  <head>
    <h1>something</h1>
    <base target="_top">
  </head>
  <body>
  <select id="cars" onChange="onSelect()" ></select><br>
  <span id>"carValue"</span>
  <script>loadCars();</script>
  </body>
</html>