Google Apps Script从表格取数据填充HTML下拉框失败求助

可能的问题点及修复方案 #

1. 未引入jQuery库 #

你的前端代码使用了$（jQuery语法），但如果index.html里没有引入jQuery，代码会直接失效。在index.html的<head>或<body>末尾添加jQuery引用：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. Bootstrap-select插件未刷新 #

你用了selectpicker类（属于Bootstrap-select插件），动态添加选项后必须调用插件的刷新方法，否则新选项不会被渲染。修改showProperty函数：

function showProperty(property) {
  var list = $('#propertyNameList');
  list.empty();
  // 检查返回值是否为数组，避免后端返回错误字符串时出错
  if (Array.isArray(property)) {
    for (var i = 0; i < property.length; i++) {
      list.append('<option>' + property[i] + '</option>');
    }
  } else {
    // 处理后端返回的错误信息
    list.append('<option>加载失败：' + property + '</option>');
  }
  // 刷新selectpicker插件
  list.selectpicker('refresh');
}

3. 后端返回值类型异常 #

你的getPropertiesNamesList函数在出错时返回字符串，成功时返回数组，前端若默认property为数组，会导致异常。建议后端统一返回格式，同时前端适配：
修改code.gs：

const getPropertiesNamesList = () => {
  try {
    const propertiesSheet = getSs(jamPropertyManagementSettingsSpreadsheetId).getSheetByName('Properties');
    const propertiesNamesList = getSheetHeaders(propertiesSheet);
    return {success: true, data: propertiesNamesList};
  } catch (error) {
    const errMsg = `getPropertiesNamesListError: ${error.message}`;
    Logger.log(errMsg);
    return {success: false, message: errMsg};
  };
};

对应的前端修改：

function showProperty(result) {
  var list = $('#propertyNameList');
  list.empty();
  if (result.success) {
    const property = result.data;
    for (var i = 0; i < property.length; i++) {
      list.append('<option>' + property[i] + '</option>');
    }
  } else {
    list.append('<option>加载失败：' + result.message + '</option>');
  }
  list.selectpicker('refresh');
}

4. 添加前端错误捕获 #

给google.script.run添加失败处理函数，排查调用时的错误：

$(function() {
  google.script.run
      .withSuccessHandler(showProperty)
      .withFailureHandler(function(error) {
        console.error('调用后端函数失败：', error);
        $('#propertyNameList').append('<option>调用失败：' + error.message + '</option>');
        $('#propertyNameList').selectpicker('refresh');
      })
      .getPropertiesNamesList();
});

5. 确认getSheetHeaders返回值正确 #

检查getSheetHeaders函数是否确实返回一维字符串数组（表格表头数据），可以在后端用Logger.log(propertiesNamesList)打印，或前端用console.log(property)查看返回值结构。

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