从 Google 电子表格中的列填充 HTML 下拉菜单

2024-05-27

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

我有一个 Google 电子表格,其中一列中有值(假设 A 列)。 我使用 .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 列中的所有元素。我尝试了多种选择,但没有获得所需的结果。

那么,我需要如何继续实施下拉填充过程呢?


  • 您想要创建一个选择框并输入电子表格“A”列中的值。
  • 当选择选择框中的值时,您想要检索该值。

如果我的理解是正确的,那么这个修改怎么样?我认为针对您的情况有多种答案,因此请将此视为其中之一。

修改后的脚本的流程如下。

  1. 打开一个对话框。
  2. 单击“下拉”按钮。
  3. By google.script.run,运行函数getValuesFromSpreadsheet()在 Google Apps 脚本端。
  4. At getValuesFromSpreadsheet(),从电子表格中检索值并将其返回到 Javascript。
  5. At withSuccessHandler(),检索返回值。使用这些值创建一个选择框。
  6. 当选择框的值被选中时,selected()运行并检索所选值。

当反映上述流程时,修改后的脚本如下。

GAS:

请将以下 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
}
  • In this sample script, the values are retrieved from "Sheet1" of the active Spreadsheet. The values are in the column "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>
  • Use google.script.run用于从电子表格中检索值。
  • Using withSuccessHandler,从 Google Apps 脚本检索值。
  • 单击“下拉”按钮时,将创建一个选择框。
  • 所选值可以在控制台中看到。

Note:

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

参考:

  • 谷歌脚本运行 https://developers.google.com/apps-script/guides/html/reference/run
  • 与成功处理程序 https://developers.google.com/apps-script/guides/html/reference/run#withSuccessHandler(Function)

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 Google 电子表格中的列填充 HTML 下拉菜单 的相关文章

随机推荐

  • go json marshal 的默认大小写选项?

    我有以下结构要导出为 json type ExportedIncident struct Title string json title Host string json host Status string json status Dat
  • 如何将自定义表情符号(小图片)插入到React Native的Textinput中?

    我正在构建一个 BBS 应用程序 用户可以在发布或回复文章时将自定义表情符号 使用我创建的自定义键盘 插入到 Textinput 中 例如 我有一张笑脸图片 它将映射到类似 custom smile code 的代码 当用户在Textinp
  • Spark-shell 使用不同版本的 Scala。使用 homebrew 安装 scala 和 apache-spark

    我使用 homebrew 安装了 scala 和 apache spark 它安装了 scala 2 12 4 和 apache spark 2 2 0 但是 如果您结帐spark shell version它使用不同的 scala 版本
  • 如何在HTTP post中向PHP服务器发送多个参数

    我正在将 base64 字符串发送到 php 服务器 并且运行良好 现在我想以字符串形式发送另一个参数 谁能告诉我下面的代码中需要添加什么代码 下面的代码适用于单个参数 我们如何修改它的多个参数 NSData data UIImageJPE
  • Visual Studio 2010 (C++):暂时抑制 C4706 警告

    当您在 Visual Studio 2010 中编译以下 C 源文件并启用警告级别 W4 时 include
  • 没有 ssl 的 Web 加密 API

    我编写了一个用于安全消息传输的小网络应用程序 以了解有关加密的更多信息 并想向我的朋友展示它并让他们玩一下 所以我将它托管在我的小服务器上 并惊讶地发现 Web Crypto API 我竭尽全力开始工作 因为它的错误消息不是很具体 需要 S
  • 帮助将二进制图像数据从 SQL Server 读取到 PHP 中

    我似乎无法找到将二进制数据从 SQL 服务器读取到 PHP 的方法 我正在开发一个项目 需要能够将图像直接存储在 SQL 表中 而不是文件系统上 目前 我一直在使用这样的查询 插入 myTable 文档 选择 从 OPENROWSET BU
  • 文件夹对象的文件大小信息

    对于Folder对象 它列出了该文件夹 item collection 下的文件 以及文件名和文件ID 包含文件大小会很有帮助 因为目前需要查询每个文件才能获取大小 Thanks 感谢您的反馈 我们收到了很多过滤 GET folders 调
  • 如何在Python中拟合阶跃函数

    我有一个关于使用 curve fit 等 scipy 例程拟合阶跃函数的问题 我很难将其矢量化 例如 import numpy as np from scipy optimize import curve fit import matplo
  • ElementNotVisibleException:消息:元素在 Robot Framework 中不可交互

    示例代码 div class modal footer div
  • 在TestCafé测试中注入的injectScripts中的脚本在哪里?

    我正在以编程方式设置 TestCaf 测试 并且使用injectScripts配置上Runner类来注入函数 根据文档 这些脚本被添加到测试页面的标题中 是否可以从测试本身调用函数 我还没有找到办法做到这一点 我可以看到脚本映射在测试中是可
  • Fragment 内的 FragmentPagerAdapter

    我在实现基于多个 ViewPager 的设计时遇到了一些麻烦 在较高的层次上 我有一个 FragmentActivity 其中只有一个 FrameLayout 作为其内容 我有 3 个不同的片段想要显示 所有 3 个均为全屏 一次仅使用 1
  • Three.js获取立方体的4个角坐标?

    如何获得立方体四个角的坐标 如果您使用 CubeGeometry 宽度 高度 深度 并将立方体放置在某处 那么您的八个角位于 position x width 2 position y height 2 position z depth 2
  • 在 Matplotlib 中选择标记大小

    我正在 matplotlib 中用方形标记绘制散点图 如下所示 我想实现这样的目标 这意味着我必须调整标记大小和图形大小 比例 以使标记之间没有空白 每个索引单元还应该有一个标记 x and y都是整数 所以如果y从 60 到 100 应该
  • 为什么我的查询在参数化后会中断?

    我有 2 张桌子 Sales and Product Sales可以将产品存储为Idn or Name 传统设计 和Type列指定实际type与之相关 Product等是连接的子集表into这个表来获取真实的数据 在这个例子中 Produc
  • Facebook 分享不显示来自开放图元标签的图像

    我正在尝试将 Facebook 共享按钮集成到我雇主的网站 标题 网址 描述 简介均显示正确 但未附加任何图像 当共享对话框打开时 图像容器会闪烁 然后消失 就好像 facebook 正在尝试处理图像但失败一样 我正在使用 og image
  • 内容://短信/收件箱查询

    我用的是安卓1 6 我想查询 content sms inbox 如何实施 无论是否是 SDK 的一部分 除了使用之外 我看不到任何访问 SMS 数据的方法content sms inbox String folder content sm
  • 从变量使用 OLE DB 源命令的 EzAPI 等效项是什么?

    tl dr 使用 来自变量的 SQL 命令 数据访问模式的 OLE DB 源并分配变量的 EzAPI 代码是什么 Preamble 每月一次 我们需要使用生产数据的子集刷新我们的公共测试站点 我们已确定 根据我们的需求 SSIS 解决方案最
  • SwiftUI 关闭多个模态表

    我在用 sheet isPresented self showModal 在我的根视图中呈现一个模式 在模态中 我正在使用NavigationView引导用户浏览各个页面 对于用户配置文件构建器 在导航堆栈的最后一页中 我正在使用 Envi
  • 从 Google 电子表格中的列填充 HTML 下拉菜单

    我是 gs 的新手 所以这应该不难 我有一个 Google 电子表格 其中一列中有值 假设 A 列 我使用 gs 创建了一个自定义菜单 用户将在其中选择一个选项 单击其中一个选项 新组件 将出现一个弹出窗口 其中包含一个下拉菜单 用户应从其