【发布时间】：2021-07-26 22:01:23
【问题描述】：
我正在研究如何使用 Google 脚本将数据从工作表传输到表单中的下拉列表。
我已将数据收集在一个表格中，我认为解决此问题的最佳解决方案是通过 JS 脚本传输数据。 （如果您有更好的选择，请告诉我）
我在这个链接之后做了一些测试：Set Google Script variable in JavaScript
这是我的代码：
Main.gs
/**
* Retrieves unique datas in a given column
* @param column, the column where are the datas
* @return uniqueDatas
*/
function searchUniqueDatas(column) {
var range = sheet.getRange(5, column, sheetLastRow);
var rangeData = range.getValues();
var uniqueDatas = [];
// Gather all the column datas
for (var i=0; i < rangeData.length; i++) {
uniqueDatas = uniqueDatas.concat(rangeData[i+1]);
}
return uniqueDatas = uniqueDatas.filter(onlyUnique);
}
var typeData = searchUniqueDatas(1); // The unique data are in a table. This works perfectly
AddCustomer.GS
// I tried to do as the link said
function getData(data) {
return data;
}
function doGet(){
return HtmlService.createHtmlOutputFromFile('FormAddCsutomer');
}
AddCustomerForm.html
<label for="type">Type *</label><br/>
<select multiple id="type" name="type" required>
<!-- dropdown to fill -->
</select><br/><br/>
希望我说清楚了。
Cooper 回答后编辑
我按照您的代码做了一些测试。不过还是不行。
您能帮我找出问题所在吗？
谷歌脚本
// getData(data) and doGet() have been deleted
function getSelectOptions()
{
sortOptions();
var options=[];
for(var i=0; i < typeData.getValues().length; i++)
{
options.push(typeData.getValues()[i][0]);
}
return typeData.getValues();
}
HTML
<label for="type">Type</label><br/>
<select name="type" id="type">
<option value="" selected></option>
</select><br/><br/>
<script>
$(function() {
$('#txt1').val('');
google.script.run
.withSuccessHandler(updateSelect)
.getSelectOptions();
});
function updateSelect(vA) {
var select = document.getElementById("type");
select.options.length = 0;
for(var i=0; i < vA.length; i++)
{
select.options[i] = new Option(vA[i],vA[i]);
}
}
</script>
新编辑
@Cooper：按照您的表格示例，
.gs
function getUniqueCustomers () {
return customerData.getValues(); // Return a 1-dimension table with the data
}
.html
<form id="filterForm" onSubmit="handleFormSubmitFilter(this)">
<label for="customer">Customer</label><br/>
<select name="customer" id="customer">
<? var vs = getUniqueCustomers();
for (var i=0; i < vs.length; i++) { ?>
<option> <?= vs[i] ?> </option>
<?
}
?>
</select><br/><br/>
...
</form>
我尝试了 for 和 forEach。它一次显示“”而不是数据。
我想知道之间的代码是否被识别。
有什么想法吗？
8 月 6 日编辑，
仍在尝试解决此问题。
我尝试关注这个 tuto 视频，但我无法调整我的代码（我的工作表中只有一列，我希望每个选项的文本、值和 id 都是相同的数据）。 https://www.youtube.com/watch?v=pmQdrAIdfGM
这是我的代码。 感谢您的帮助。
// Return a simple array with all the sheet values. It works
function getUniqueCustomers () {
return customerData.getValues();
}
HTML
<label for="customer">Customer</label><br/>
<select name="customer" id="customer" onChange="onSelectCustomer()">
<script>loadCustomer();</script>
</select><br/><br/>
<script>
function loadCustomer() {
google.script.run.withSuccessHandler(function(ar) {
var customerSelect = document.getById('customer');
let option = document.createElement('option');
option.value = "";
option.text = "";
customerSelect.appendChild(option);
ar.forEach(function (item) {
option.value = item[0];
option.text = item[0];
option.id = item[0];
customerSelect.appendChild(option);
});
}).getList();
};
function onSelectCustomer() {
var id = document.getElementById("customer").value;
document.getElementById("carValue").innerHTML = id;
};
</script>
【问题讨论】：
-
typeData 和 sortOptions() 未定义。
-
getSelectOptions() 如果使用 JQuery，应该从 window.onload 或 $(function) 调用
标签： html forms google-apps-script google-sheets