Materialize.CSS下拉框无法从Google Sheets动态拉取数据求助

核心问题分析 #

你的下拉框无法正常加载表格数据，主要由以下几个关键错误导致：

1. Materialize初始化顺序错误 #

你先调用了M.FormSelect.init(elems)初始化下拉组件，之后才通过google.script.run拉取数据并添加option。Materialize的FormSelect初始化只会识别当前已存在的DOM元素，后续动态添加的option不会被自动渲染，导致下拉框显示异常。

2. 数据结构错误 #

giveData函数中，你用clients.push([name])将每个名字包装成子数组，导致返回的data.Names是二维数组。在populateWords循环时，thisText实际是数组而非字符串，无法正确显示名称。

3. 冗余的API调用与错误处理绑定错误 #

handlers函数中两次调用giveData，且失败处理函数未与成功处理绑定到同一个请求，既浪费资源又无法正确捕获请求失败。

4. 未定义的ss变量 #

giveData中直接使用ss.getRangeByName，但ss变量未声明，会导致脚本执行报错。

5. 低效的单元格取值逻辑 #

逐个调用getCell(i+1, 1)获取值，远不如一次性获取所有值后处理高效，且循环索引逻辑易出错。

修复后的完整代码 #

前端HTML与JS #

<!-- Materialize下拉框 -->
<div class="input-field col s6">
  <select class="icons browser-default" id="client" onChange="getNameText()">
    <option value="" disabled selected>Opdrachtgever</option>
  </select>
</div>

// 获取选中选项的文本
function getNameText() {
  var sel = document.getElementById('client');
  var nameText = sel.options[sel.selectedIndex].text;
  return nameText;
}

// 侧边栏加载事件
document.addEventListener('DOMContentLoaded', function() {
  // 先初始化其他组件
  var timer = document.querySelectorAll('.timepicker');
  var datepick = document.querySelectorAll(".datepicker");
  var autocomplete = document.querySelectorAll(".autocomplete");

  M.Timepicker.init(timer, {twelveHour: false, showClearBtn: true, defaultTime: '00:00'});
  M.Datepicker.init(datepick, {format:'dd mm yyyy', autoClose: true});
  
  // 先拉取数据，再初始化下拉框
  handlers();
});

function handlers() {
  // 单次调用API，同时绑定成功与失败处理
  google.script.run
    .withSuccessHandler(populateWords)
    .withFailureHandler(function(err) {
      console.error('加载数据失败:', err);
      alert('无法加载客户名称，请检查脚本权限');
    })
    .giveData();
}

function populateWords(data){
  var selectTag = document.getElementById("client");
  // 清空现有选项（保留默认提示项）
  while(selectTag.options.length > 1) {
    selectTag.remove(1);
  }
  
  // 循环填充选项
  data.Names.forEach(function(name, index) {
    var option = document.createElement("option");
    option.text = name;
    option.value = index;
    selectTag.add(option);
  });

  // 数据填充完成后，初始化Materialize下拉组件
  M.FormSelect.init(selectTag);
}

后端Google Apps Script #

function giveData() {
  // 定义ss变量，获取当前活动表格
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var range = ss.getRangeByName("ClientsClientsNames");
  if (!range) {
    throw new Error('未找到名为"ClientsClientsNames"的命名区域');
  }
  
  // 一次性获取所有值，过滤空行并提取名称
  var clients = range.getValues()
    .filter(function(row) {
      return row[0] !== '' && row[0] !== null;
    })
    .map(function(row) {
      return row[0];
    });
  
  return { Names: clients };
}

关键修复点说明 #

1. 调整初始化顺序：先拉取数据并填充option，再调用M.FormSelect.init确保Materialize识别所有选项。
2. 修正数据结构：将clients.push([name])改为clients.push(name)，返回一维字符串数组。
3. 优化API调用：合并成功与失败处理到同一个google.script.run请求，避免冗余调用。
4. 定义ss变量：添加var ss = SpreadsheetApp.getActiveSpreadsheet()确保表格对象正确获取。
5. 高效数据处理：使用getValues()一次性获取所有数据，结合filter和map简化逻辑，提升性能。
6. 添加空选项清理：避免侧边栏重复打开时选项重复累积。

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