使用谷歌应用程序脚本更改列表选项

change list options using google apps script

本文关键字：列表 选项 脚本 谷歌 应用程序      更新时间：2023-09-26

我想使用html和javascript（谷歌应用程序脚本）的组合将项目列表加载到下拉选择框中。

我已经能够让所有的javascript函数按预期调用并返回值，但当我的代码试图向select对象添加选项时，它似乎失败了。

这是我当前的HTML（"索引"）：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// The code in these functions run when the page is loaded.
  google.script.run.withSuccessHandler(addItems).getFolderList();
//This function uses an array of folder names to create options for the select list
function addItems(folders){
  alert('addItems was called!');
  var htmlSelect = document.getElementById('folder');
  for(var z = 0; z < folders.length; z++){
    var selectBoxOption = document.createElement('OPTION');
    selectBoxOption.value = folders[z];
    selectBoxOption.text = folders[z];
    htmlSelect.add(selectBoxOption); 
  }
}
//this function lets the user know if the upload failed or not
function successMess(returnText) {
    var div = document.getElementById('output');
    div.innerHTML = '<p>'+returnText+'</p>';
}
</script>
</head>
<body>
<form id="myForm">
<p>Please choose a folder to receive the upload</p>
<select name="folder" id="folder">
<option value="Test Value">Test Value</option>
</select>
<br>
  <input name="myFile" type="file" id="myFile"/>
  <br>
  <input type="button" value="Submit"
      onclick="google.script.run.withSuccessHandler(successMess).processForm(this.parentNode)" />
</form>
<div id="output"></div>
</body>
</html>

下面是附带的JavaScript（.gs）：

function doGet(){
  return HtmlService.createHtmlOutputFromFile('index');
}
function processForm(formObject) {
  var formBlob = formObject.myFile;
  var folderName = formObject.folder;
  var returnText = 'Please choose a valid file to upload';
  if(formBlob.length > 0){
    returnText = 'Your document was uploaded successfully!';
    try{
      var folder = DriveApp.getFoldersByName(folderName).next();
      var driveFile = folder.createFile(formBlob);
    }catch(e){
      returnText = 'There was an error processing your document';
    }
  }
  return returnText;
}
function getFolderList(){
  Logger.log('getFolderList was called');
  var ParentFolder = DriveApp.getFoldersByName('Test Folder').next();
  var shopFolders = ParentFolder.getFolders();
  var folderList = [];
  while(shopFolders.hasNext()){
    folderList.push(shopFolders.next().getName());
  }
  folderList.sort();
  return folderList;
}

一切都很顺利。。。文件夹列表填充除外。我手动填充了选择选项，只是为了确保processForm功能正常工作。我甚至测试过（使用另一个警报），以确保"getFolderList（）"中的文件夹名称数组被忠实地传递（事实确实如此）。获取名为"文件夹"的选定项目或创建新的"选项"项目似乎没有任何问题。当"addItems"尝试将该选项添加到列表中时，它似乎失败了。有人能告诉我我做错了什么，和/或如何解决吗？

谢谢！

以下是您的问题的解决方案：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="myForm">
<p>Please choose a folder to receive the upload</p>
<select name="folder" id="fldrList">
<option value="Test Value">Test Value</option>
</select>
<br>
  <input name="myFile" type="file" id="myFile"/>
  <br>
  <input type="button" value="Submit"
      onclick="google.script.run.withSuccessHandler(successMess).processForm(this.parentNode)" />
</form>
<div id="output"></div>
</body>
<script type="text/javascript">
// The code in these functions run when the page is loaded.
  google.script.run.withSuccessHandler(addItems).getFolderList();
//This function uses an array of folder names to create options for the select list
function addItems(folders){
  console.log('addItems was called!' + folders);
  var htmlSelect = document.getElementById('fldrList');
  console.log('htmlSelect: ' + htmlSelect);
  var optionHTML = '';
  for(var z = 0; z < folders.length; z++){
    console.log('z: ' + z);
    console.log('folders[z]: ' + folders[z]);
    optionHTML = optionHTML + "<option value='" + folders[z] + "'>" + folders[z] + "</option>";
  };
  htmlSelect.innerHTML = optionHTML;
}
//this function lets the user know if the upload failed or not
function successMess(returnText) {
    var div = document.getElementById('output');
    div.innerHTML = '<p>'+returnText+'</p>';
}
</script>
</html>

将选择元素的id名称从folder更改为fldrList。

不幸的是，add方法不起作用。你可以以字符串的形式创建HTML并注入它

请注意，FOR LOOP创建了一个HTML字符串，然后当FOR LOOP完成时，HTML被注入到SELECT元素中。它有效。出于某种原因，Apps Script似乎不允许使用.add方法。不知道为什么。

相关文章：