Google html 从电子表格创建列表

Question

我正在尝试根据Previous questioe posted by @Kron011Previous 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

这将类似于您对元素“菜单”所做的事情。使用 jquery，您可以选择包含选项的框的元素，然后附加新值。在这种情况下，它的 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>');

  }

在这种情况下，与元素“菜单”不同，内容将保留。这意味着在框中您将看到选项“一、二”以及您添加的任何内容，因为我们不会像此行那样删除内容

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

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