输入和退格后显示 Google 脚本 HTML 数据列表答案

【问题标题】：Google script HTML Datalist displays after entry and backspace输入和退格后显示 Google 脚本 HTML 数据列表
【发布时间】：2021-07-25 13:51:26
【问题描述】：

我在谷歌表格的侧边栏表单中有两个输入字段。两个输入的 Datalist 都是从电子表格中填充的。第一个在关注输入字段后立即显示选项。第二个 Datalist 是根据第一个字段的输入创建的。当我通过警报转储第二个 Datalist 的信息时，它是可用的。

但是，可用选项不会在关注第二个输入字段后立即显示。我可以在按空格键和退格键后显示它。在加载第二个列表的数据时，我已经尝试使用“onblur”和“onchange”进行一些更改，但没有任何改变。这是来自 HTML 文件的代码和表单信息。如有任何建议，我将不胜感激。

HTML 表单域：

<input list="food" class="myStyle" id="foodItems" onblur="loadMeasures(this);" > // replaced this line with the line below
<input list="food" class="myStyle" id="foodItems" 
      onblur="resetMeasuresList();loadMeasures(this);" >
      <datalist id="food" placeholder=" food entry"  ></datalist>
      </input><br> 
      <input list="measureList" class="myStyle" id="measure" >
      <datalist id="measureList" > </datalist>
      </input><br>

脚本：

function loadFoods(selectObject) {
      google.script.run.withSuccessHandler(function(ar) { 
        var foodSelect = document.getElementById("food");
        ar.forEach(function(item) {
          let option = document.createElement("option");
          option.text = item[0];
          foodSelect.appendChild(option);
        });
      }).getList()
    }

    function loadMeasures(selectObject) {
      var food = selectObject.value;
      removeOptions(document.getElementById('measureList')); //moved this line to a standalone function 'resetMeasuresList'

      if ( food == "pre fix") {
        google.script.run.preFixView();
      }
      
      google.script.run.withSuccessHandler(function(ar) {
        measureSelect = document.getElementById("measureList");
        ar.forEach(function(item) {
          let option = document.createElement("option");
          option.text = item[0];
          measureSelect.appendChild(option);
        });
      }).getTypeList(food)
    }

用于清除选项列表的函数

function removeOptions(selectElement) {
   var i, L = selectElement.options.length - 1;
   for(i = L; i >= 0; i--) {
      selectElement.children[i].remove();
   }
  }

【问题讨论】：

请分享样张。 Share a test sheet

标签： javascript html google-apps-script

【解决方案1】：

问题在于，您通过google.script.run 调用的GS 函数会异步运行，除非您按如下方式依次调用它们：

google.script.run.withSuccessHandler(function(){
  //do something
  google.script.run.withSuccessHandler(function(){
    //do something
    google.script.run.function3()
  }).function2()
}).function1()

但是我建议您首先从工作表中调用所有静态数据（食物、测量列表）一次，然后使用客户端函数对其进行操作，而无需重复调用它们。

【讨论】：

谢谢。我将尝试您的建议，即第一次阅读所有内容，然后从客户端功能中进行选择。但是，即使使用此代码，我也可以通过警报消息验证第二个表的信息是否已经可用。它只是不想出现，直到我点击空格和删除键。
@sk65plus 如果我也看到了您的服务器端代码，也许我可以为您提供更多帮助。
如果您正在写入电子表格并立即从另一个函数读取，您可能会发现在两者之间使用 SpreadsheetApp.flush() 很有价值。
感谢您快速调查此事。我能够通过移动 removeOptions(document.getElementById('measureList')); 来解决部分问题。 .不碍事。我将编辑原始问题以显示我所做的更改。删除先前的选项列表以某种方式导致选项列表中留下了一些东西？我不确定。

【解决方案2】：

我试图在填充之前清除选项列表。这以某种方式创建了一个可能的空白条目？需要空格删除序列才能到达选项列表的其余部分。我不知道。在任何事件中移动代码'removeOptions(document.getElementById('measureList'));'到一个单独的函数。我已经用所做的更改修改了原始问题。

【讨论】：