本文介绍了从Google电子表格的列中填充HTML下拉菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I´m new to .gs so this should not be difficult.

我有一个Google Spreadsheet,其列中有值(假设A列)。
我已经使用.gs创建了一个自定义菜单,用户可以在其中选择一个选项。

I have a Google Spreadsheet with values in a column (Lets say column A).I have created a custom menu using .gs where the user will select an option.

点击其中一个选项(新组件),会弹出一个带有

Clicking one of the options (new component) a popup appears with a dropdown menu where user should select from the values.

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列中的所有元素。我尝试了几种选择,但未获得所需的结果。

I want the dropdown menu to show all elements in column A from the spreadsheet. I´ve tried several options but have not obtained the required result.

那么,我该如何继续执行下拉填充过程?

So, how do I need to proceed to implement the dropdown populating process?

推荐答案


  • 您要创建一个选择框,然后将电子表格的 A列中的值放入。

  • 从选择框中选择一个值时,您要检索该值。

  • 如果我理解是正确的,此修改如何?我认为您的情况有几个答案,所以请仅将其作为其中之一。

    If my understanding is correct, how about this modification? I think that there are several answers for your situation, so please think of this as just one of them.

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

    The flow of this modified script is as follows.


    1. 打开对话框。

    2. 单击下拉按钮。

    3. 通过 google.script.run ,在Google Apps脚本一侧运行 getValuesFromSpreadsheet()的功能。

    4. getValuesFromSpreadsheet(),从电子表格中检索值并返回到Javascript。

    5. withSuccessHandler(),将检索返回的值。使用这些值,将创建一个选择框。

    6. 选择选择框的值后,将运行 selected()并检索选定的值。

    1. Open a dialog.
    2. Click "Dropdown" button.
    3. By google.script.run, run the function of getValuesFromSpreadsheet() at Google Apps Script side.
    4. At getValuesFromSpreadsheet(), the values are retrieved from Spreadsheet and returned to Javascript.
    5. At withSuccessHandler(), the returned values are retrieved. Using the values, a select box is created.
    6. When a value of the select box is selected, selected() is run and retrieved the selected value.

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

    When above flow is reflected, the modified script is as follows.

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

    Please add the following Google Apps Script to 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列中。


      • 如果要从其他范围和工作表中检索,请进行修改。

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

        Please add the following Javascript to 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脚本中检索值。

        • 单击下拉按钮,将创建一个选择框。

        • 可以在控制台上看到所选的值。

          • Use google.script.run for retrieving the values from Spreadsheet.
          • Using withSuccessHandler, retrieve the values from Google Apps Script.
          • When "Dropdown" button is clicked, a select box is created.
          • The selected value can be seen at console.

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




            • google.script.run
            • withSuccessHandler

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

            If I misunderstood your question, I'm sorry.

            这篇关于从Google电子表格的列中填充HTML下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-27 16:29