时间戳

首页 > 解决方案 > 从 Google 表格创建 HTML 下拉列表时遇到问题

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

问题描述

Google 脚本的新手。尝试创建一个表单，其中包含一个填充有谷歌工作表的下拉列表。

我在网上找到了几个这样的例子，并尝试在表格的侧边栏上创建一个下拉列表。该电子表格有一个名为“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>

标签： htmlgoogle-sheetsdropdown

解决方案

进一步查看 dropdowList.html 中的代码后发现两个错误。我输入了 =“carValue” 而不是 <span id = “carValue>。另一个错误是 google.script.run.withSuccessHandler(function(ar)) 而不是 google.script.run.withSuccessHandler(function(ar) 本质上导致该功能无法正常运行。抱歉给您带来的麻烦

推荐阅读