先に書いた
Googleドライブの特定フォルダ内のフォルダをHtmlServiceでselectのoptionに追加したいではselect要素にoption要素を追加しました。
今回は
optionの選択を変更した時に反応する処理を作ります。
ここでは
Googleドライブの親フォルダ内の子フォルダのファイルを取得して
２つ目のselectにoptionを追加します。
Googleドライブ内のフォルダとファイル
Googleドライブ内のフォルダとファイル
親フォルダ
└TEST3
└TEST2
└TEST1
└サンプル2
└サンプル1
HtmlServiceで、2つのselectのoptionの値を操作したい。
コード.gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile("index");
}
/************************************
getFoldersInFolder
************************************/
function getFoldersInFolder() {
const folderId = "親フォルダのID";
const parentFolder = DriveApp.getFolderById(folderId);
const folders = parentFolder.getFolders();
let objs = [];
while(folders.hasNext()) {
const folder = folders.next();
var obj = {};
obj["name"] = folder.getName();
obj["id"] = folder.getId();
objs.push(obj);
}
return objs;
}
/************************************
getFilesInFolder
************************************/
function getFilesInFolder(folderId) {
const parentFolder = DriveApp.getFolderById(folderId);
const files = parentFolder.getFiles();
let objs = [];
while(files.hasNext()) {
const file = files.next();
var obj = {};
obj["name"] = file.getName();
obj["id"] = file.getId();
objs.push(obj);
}
return objs;
}
|
index.html
<!DOCTYPE html>
<html>
<body>
<div id="main">
<select id="folders_select"></select>
<br>
<select id="files_select"></select>
</div>
<script>
elem("folders_select").onchange = selectChanged;
get_data();
/************************************
get_data()
************************************/
function get_data() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.getFoldersInFolder();
}
/************************************
onSuccess(result)
************************************/
function onSuccess(folders) {
const select = elem("folders_select");
for(let i = 0; i < folders.length; i++) {
const name = folders[i]["name"];
const id = folders[i]["id"];
console.log(name, id)
createSelectOptions(select, name, id);
}
}
/************************************
createSelectOptions
************************************/
function createSelectOptions(select, name, id) {
const option = document.createElement("option");
option.textContent = name;
option.setAttribute("id", id);
select.appendChild(option);
}
/************************************
selectChanged
************************************/
function selectChanged() {
const select = elem("folders_select");
const index = select.selectedIndex;
const id = select[index].id;
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccessChanged)
.getFilesInFolder(id);
}
/************************************
onSuccessChanged
************************************/
function onSuccessChanged(files) {
const select = elem("files_select");
for(let i = 0; i < files.length; i++) {
const name = files[i]["name"];
const id = files[i]["id"];
console.log(name, id)
createSelectOptions(select, name, id);
}
}
/************************************
onFailure(e)
************************************/
function onFailure(e) {
alert([e.message, e.stack]);
}
/************************************
elem(id)
************************************/
function elem(id) {
return document.getElementById(id);
}
</script>
</body>
</html>
|
