Google html 从电子表格创建列表

Question

我正在尝试根据此处发布的问题从电子表格中获取一个列表来填充 Previous questioe posted by @Kron011，但我有点吃力。我将这些行添加到我的 .gs 文件中：

function getMenuListOne(){
return SpreadsheetApp.openbyId('spreadsheet_key').getSheetByName('sheet1')
.getRange(row, column, numRows, numColumns).getValues();
}

我将这些行添加到我的 HTML 文件中：

  <select id="menu">
  <option></option>
  <option>Google Chrome</option>
  <option>Firefox</option>
  </select>


<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getMenuListFromSheet();
  google.script.run.withSuccessHandler(showMenu)
      .getMenuListFromSheet();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}

function showMenu(menuItems) {
  var list = $('#menu');
  list.find('option').remove();  // remove existing contents

  for (var i = 0; i < menuItems.length; i++) {
    list.append('<option>' + menuItems[i] + '</option>');
  }
}

</script>

一如既往，我痛苦的有限经历阻碍了我的努力。我可以让一个新的菜单框出现并显示我想要的正确结果，但我无法让现有的框显示相同的列表。现有的盒子代码目前是：

<input type="text" name="site" list="depotslist" id="site" class="form-control" placeholder="Select depot/site" required>
                    <datalist id="depotslist">
                    <option value="one">
                    <option value="two">
                    </datalist>

但是有人可以指出我需要更改现有菜单框的哪些部分以使这两个位能够通信的正确方向吗？

7 月 23 日更新

我添加了以下代码来让另一个列表从另一个来源运行：

    $(function() {
  google.script.run.withSuccessHandler(showThings2)
      .getMenuListSources();
  google.script.run.withSuccessHandler(showMenu2)
      .getMenuListSources();
});

function showThings2(things2) {
  var list2 = $('#things2');
  list.empty();
  for (var i = 0; i < things2.length; i++) {
    list2.append('<li>' + things2[i] + '</li>');
  }
}

function showMenu2(menuItems2) {
  var list2 = $('#menu2');
  var box2 = $('#sourcelist');
  list2.find('option').remove();  // remove existing contents

  for (var i = 0; i < menuItems2.length; i++) {
    list2.append('<option>' + menuItems2[i] + '</option>');
    box2.append('<option>' + menuItems2[i] + '</option>');
  }
}

.gs 文件中的这些行：

    var Bvals = SpreadsheetApp.openById(ssKey).getSheetByName('SourceCodes').getRange("C3:C").getValues();
var Blast = Avals.filter(String).length;
return SpreadsheetApp.openById(ssKey).getSheetByName('SourceCodes').getRange(3,3,Blast,1).getValues();

Answer 1

这与您对元素 "menu" 所做的类似。使用 jquery，您可以 select 包含选项的框的元素，然后附加新值。在这种情况下，它的 ID 是：depotslist.

function showMenu(menuItems) {
  var list = $('#menu');
  var box =  $('#depotslist');
  list.find('option').remove();  // remove existing contents

  for (var i = 0; i < menuItems.length; i++) {
    list.append('<option>' + menuItems[i] + '</option>');
    box.append('<option>' + menuItems[i] + '</option>');

  }

与元素 "menu" 不同，在这种情况下，内容将保留。这意味着在框中您将看到选项 "one, two" 以及您添加的任何内容，因为我们不会像此行那样删除内容

list.find('option').remove();

我不确定这是否正是您想要做的，如果这没有帮助请告诉我。

Google html 从电子表格创建列表

Google html creating a list from spreadsheet

html

forms

list

google-apps-script

drop-down-menu