After a long hunt (I've been living and breathing StackOverflow lately), I thought I'd take my problem to you all.
I'm still a newbie to Google Script, so bear with me.
I'm trying to write a dynamic dropdown list as an input in an HTML form. My hope is to get the list to populate options with values from a google sheet. The function, getList, which returns the array values works as expected, but the function to add option tags and their values to the list is failing...
Check out what I have below and let me know if you have any insight or could steer me in the right direction. Thanks!!
//basic function that builds the form using indexEvent.html as the template
function doGet(e) {
return HtmlService
.createTemplateFromFile('index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
//Simple function to find the wanted sheet by it's independent ID
function getSheetById(id) {
return SpreadsheetApp.getActive().getSheets().filter(
function(s) {return s.getSheetId() === id;}
)[0];
}
//Gets existing values in Column "B" and lump into 1-D array
function getList() {
var ss = SpreadsheetApp.openById('sheet ID');
var sheet = getSheetById(240411081);
var list = sheet.getRange(2, 2, sheet.getLastRow()-1, 1).getValues();
var values = list.toString().split(",");
return values;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="Form" onload="addList()">
<div>
<label for="List">Select Value:</label><br>
<input list="list" name="list" placeholder="Choose Value" required> -->
<datalist id="dropdownList">
<!--
This is where I am trying to dynamical add <option> tags
EXAMPLE:
<option value="values[0]" />
<option value="values[1]" />
<option value="values[2]" />
... and so on
-->
</datalist>
</div>
</form>
</body>
<script>
function addList() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(addListValues)
.getList();
}
function addListValues(values) {
var list = document.getElementById('dropdownList');
for (var i = 0; i < values.length; i++) {
list.appendChild('<option value="' + values[i] + '" />');
}
}
function onFailure(err) {
alert('There was an error!' + err.message);
}
</script>
<html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
