从谷歌电子表格中的列填充 HTML 下拉菜单答案

【问题标题】：Populate HTML dropdown menu from column in google spreadsheet从谷歌电子表格中的列填充 HTML 下拉菜单
【发布时间】：2019-01-16 12:23:47
【问题描述】：

我是 .gs 的新手，所以这应该不难。

我有一个 Google 电子表格，其中有一列中的值（比方说 A 列）。我使用 .gs 创建了一个自定义菜单，用户将在其中选择一个选项。

单击其中一个选项（新组件）会出现一个弹出窗口，其中包含一个下拉菜单，用户应在其中从值中进行选择。

CustomMenu.gs

 function onOpen() {
 var ui = SpreadsheetApp.getUi();
 // Or DocumentApp or FormApp.
 ui.createMenu('bq Library Menu')
  .addItem('Add new component', 'newComponent')
  .addSeparator()
  .addSubMenu(ui.createMenu('Modify existing component')
      .addItem('Remove component', 'removeComponent'))
  .addToUi();
 }

 function newComponent() {

 var html = HtmlService.createHtmlOutputFromFile('NewComponentForm')
     .setWidth(400)
     .setHeight(300);
 SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
     .showModalDialog(html, 'New Component Form');
 }

NewComponentForm.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
  <h2>Clickable Dropdown</h2>
  <p>Select manufacturer from the list</p>

  <div class="dropdown">
     <button onclick="loadManufacturers()" class="dropbtn">Dropdown</button>
     <div id="myDropdown" class="dropdown-content"></div>
  </div>

</body>

我希望下拉菜单显示电子表格 A 列中的所有元素。我尝试了几个选项，但都没有获得所需的结果。

那么，我需要如何继续实现下拉填充过程？

【问题讨论】：

标签： javascript html google-apps-script drop-down-menu google-sheets

【解决方案1】：

您想创建一个选择框并输入电子表格“A”列中的值。
When a value from the select box is selected, you want to retrieve the value.

如果我的理解是正确的，那么这个修改呢？我认为您的情况有几个答案，所以请认为这只是其中之一。

修改后的脚本流程如下。

打开一个对话框。
点击“下拉”按钮。
google.script.run，在 Google Apps Script 端运行 getValuesFromSpreadsheet() 的函数。
在 getValuesFromSpreadsheet()，从电子表格中检索值并返回到 Javascript。
在withSuccessHandler()，检索返回值。使用这些值创建一个选择框。
When a value of the select box is selected, selected() is run and retrieved the selected value.

当上面的流程体现出来时，修改后的脚本如下。

气体：

请将以下 Google Apps 脚本添加到 CustomMenu.gs。

function getValuesFromSpreadsheet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues(); // Retrieve values and send to Javascript
}

在此示例脚本中，值是从活动电子表格的“Sheet1”中检索的。这些值在“A”列中。
- 如果要从其他范围和工作表中检索，请修改此项。

HTML：

请将以下Javascript添加到NewComponentForm.html。

<script>
  function loadManufacturers() {
    google.script.run.withSuccessHandler(function(ar) {
      let select = document.createElement("select");
      select.id = "select1";
      select.setAttribute("onchange", "selected()");
      document.getElementById("myDropdown").appendChild(select);
      ar.forEach(function(e, i) {
        let option = document.createElement("option");
        option.value = i;
        option.text = e;
        document.getElementById("select1").appendChild(option);
      });
    }).getValuesFromSpreadsheet();
  };

  function selected() {
    const value = document.getElementById("select1").value;
    console.log(value);
  }
</script>

使用google.script.run 从电子表格中检索值。
使用 withSuccessHandler 从 Google Apps 脚本中检索值。
单击“下拉”按钮时，会创建一个选择框。
可以在控制台看到选择的值。

注意：

这是一个简单的示例脚本。所以请根据您的情况进行修改。

参考资料：

如果我误解了你的问题，我很抱歉。

【讨论】：