Google Sheets脚本下拉框无法加载工作表列表项问题求助

核心问题定位与修复 #

1. 变量名大小写不匹配（直接导致下拉框无数据）
   在前端JS的afterDropDownArrayReturned函数中，参数定义为arrayOfArrays，但遍历数组时误写为arrayofArrays（第二个字母O小写），导致无法读取数组内容。修正后即可正常加载下拉选项。

2. Bootstrap脚本重复引入（潜在冲突）
   代码中同时引入了bootstrap.bundle.min.js（已包含Popper依赖）和单独的popper.min.js、bootstrap.min.js，属于冗余引入，可能引发脚本冲突，建议只保留bootstrap.bundle.min.js。

3. 可选优化：过滤空行数据
   如果工作表「Dropdown Options」中存在空行，getLastRow()会将其计入范围，导致下拉框出现空选项。可在后端脚本中添加过滤逻辑，确保返回非空值。

修正后的完整代码 #

后端脚本（含空行过滤优化）

function getDropDownArray(){
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName("Dropdown Options");
  // 过滤空行，避免下拉框出现空选项
  return ws.getRange(2, 1, ws.getLastRow() -1, 1).getValues().filter(row => row[0] !== "");
}

前端HTML代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Item Receipt Form</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>

<div class="container">
    <div>
      <div class="form-group">
        <label for="item-name">Item Name</label>
        <select class="form-control" id="item-name">    
        </select>
      </div>

      <div class="form-group">
        <label for="qty-received">Quantity Received</label>
        <input type="text" class="form-control" id="qty-received">
      </div>
   
      <button class="btn btn-primary" id="mainButton" >Add</button>
    </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<script>
    function afterButtonClicked(){
      var item = document.getElementById("item-name");
      var qty = document.getElementById("qty-received");

      var rowData = {item: item.value,qty: qty.value};

      google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData);
    }
    function afterSubmit(e){
      var qty = document.getElementById("qty-received");
      qty.value="";
    }

    function afterSidebarLoads(){
      google.script.run.withSuccessHandler(afterDropDownArrayReturned).getDropDownArray();
    }

    function afterDropDownArrayReturned(arrayOfArrays){
      var item = document.getElementById("item-name");
      
      arrayOfArrays.forEach(function(r){
        var option = document.createElement("option");
        option.textContent = r[0];
        item.appendChild(option);
      });
    }

    document.getElementById("mainButton").addEventListener("click",afterButtonClicked);
    document.addEventListener("DOMContentLoaded",afterSidebarLoads);
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者ivanmcgurk21