0

我在谷歌表格的侧边栏表单中有两个输入字段。两个输入的 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();
   }
  }
4

2 回答 2

0

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

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

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

于 2021-07-25T14:43:27.443 回答
0

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

于 2021-07-25T19:41:27.137 回答