读取 Google Sheets 中的数据并将数据传递到自定义下拉菜单

Question

我在 Google 表格中有一个自定义下拉菜单。 我想将信息从工作表传递到下拉列表中。 （数据见截图）

感谢@Cooper 更新我的代码并运行 displayDropdown 函数后，我成功记录了数据。 所以它正在读取数据......但是，它没有在下拉列表中填充。 我在这里错过了什么（明显的）步骤？！

myDropdown.html :

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <form>
    <div class="select-style">
      <select id="dropJob"> 
        <?!= getDays(); ?>
      </select>
    </div>
  </form>
</body>
</html>

代码.gs ：

function displayDropdown()
{
     var htmlDlg = HtmlService.createHtmlOutputFromFile('myDropdown')
              .setSandboxMode(HtmlService.SandboxMode.IFRAME)
              .setWidth(350)
              .setHeight(250);              
     SpreadsheetApp.getUi()
               .showModalDialog(htmlDlg, "title");
     return HtmlService.createTemplateFromFile('myDropdown').evaluate();    
}

function getDays() 
{
  var ui = SpreadsheetApp.getUi();
  var active = SpreadsheetApp.getActive();
  var sheet = active.getSheetByName("Days");
  var myRange = sheet.getRange("A1:A7"); 
  var data    = myRange.getValues();
  var optionsHTML = "";
  for (var i = 0; i < data.length; i++) {
    optionsHTML += '<option>' + data[i][0] + '</option>';
  };
  Logger.log(optionsHTML);
  return optionsHTML;

谷歌工作表数据

Answer 1

我没有使用模板化方法。 这就是我的仅选择标签的 html 的样子，它包含了 jQuery 的资源。

<!DOCTYPE html>
<html>
  <head>
  <base target="_top">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {//this function runs after the DOM loads which goes and get the dropdown stuff from a spreadsheet and returns it to the .withSuccessHandler(updateSelect) which then calls updateSelect and pass the data array to updateSelect.
        $('#txt1').val('');
        google.script.run
          .withSuccessHandler(updateSelect)
          .getSelectOptions();
      });

    function updateSelect(vA) {//this is where the dropdown gets loaded
      var select = document.getElementById("sel1");//sel1 is the id of the select tag
      select.options.length = 0; 
      for(var i=0;i<vA.length;i++)
      {
        select.options[i] = new Option(vA[i],vA[i]);
      }
    }
  </script>
  </head>  
  <body>
    <select id="sel1"  class="control" style="width:255px;height:35px;margin:10px 0 10px 0;">
      <option value="" selected></option>
   </select>
  </body>
</html>

读取 Google Sheets 中的数据并将数据传递到自定义下拉菜单

问题描述

1 个解决方案

解决方案1
2 2019-09-17 21:33:30

读取 Google Sheets 中的数据并将数据传递到自定义下拉菜单

问题描述

1 个解决方案

解决方案1 2 2019-09-17 21:33:30

解决方案1
2 2019-09-17 21:33:30