Question

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

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

这是我当前的HTML（'index'）：

<!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”尝试将选项添加到列表时似乎失败了。谁能告诉我我做错了什么，和/或如何修复它？

谢谢！

Answer 1

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

<!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脚本似乎不允许使用.add方法。不知道为什么。

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

1 个答案:

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

1 个答案:

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