Javascript 使用谷歌应用程序脚本更改列表选项_Javascript_Html_Google Apps Script_Html Select

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

javascript html google-apps-script

Javascript 使用谷歌应用程序脚本更改列表选项,javascript,html,google-apps-script,html-select,Javascript,Html,Google Apps Script,Html Select,我想使用html和javascript（google apps脚本）的组合将项目列表加载到下拉选择框中我已经能够让所有javascript函数按预期调用和返回值，但是当我的代码尝试向select对象添加选项时，它似乎失败了这是我当前的HTML（“索引”）：除了文件夹列表，一切都运行得很好。我手动填充了select选项，以确保processForm函数正常工作。我甚至测试了（使用另一个警报）以确保“getFolderList（）”中的文件夹名称数组被忠实地传递（确实如此）。获取名为“文件夹”

我想使用html和javascript（google apps脚本）的组合将项目列表加载到下拉选择框中

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

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

除了文件夹列表，一切都运行得很好。我手动填充了select选项，以确保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>


请选择一个文件夹以接收上载
测试值




//这些函数中的代码在加载页面时运行。
google.script.run.withSuccessHandler（addItems.getFolderList（）；
//此函数使用文件夹名称数组为选择列表创建选项
函数附加项（文件夹）{
log（'调用了addItems！'+文件夹）；
var htmlSelect=document.getElementById（'fldrList'）；
log（'htmlSelect:'+htmlSelect）；
var optionHTML=''；
对于（var z=0；z'；
}

将select元素的id名称从

文件夹更改为fldrList

不幸的是，add
方法不起作用。您可以以字符串的形式创建HTML并将其注入
请注意，FOR循环创建了一个HTML字符串，然后在FOR循环完成时，HTML被注入SELECT元素。它起作用了。由于某些原因，应用程序脚本似乎不允许使用.add
方法。不知道为什么
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;
}

<!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>