javascript - 使用从 HTML 到电子表格的相关值时出现问题？

Question

我正在研究一个动态相关的下拉菜单，我已经走得很远，通过 stackoverflow 学到了很多东西，所以感谢大家。不管怎样，我已经到达了一个停止点，那里有些东西不起作用了？

这是在线脚本的 URL:https://script.google.com/macros/s/AKfycbzWi3JymieWMAGVLQVl2xEXCd_eo85hWercHAFkNrqH5dkvWWQd/exec

和电子表格的 URL:https://docs.google.com/spreadsheets/d/1BK5urtTzqZ2kc89ZnbeMSIm2-bt4KLNTQghsxn0cXBI/edit#gid=0

生成了两个列表，第一个列表列出了电子表格中的所有工作表，第二个列表应该列出第一行中的值。

下面是我的 index.html:

index.html

<div>
<select id="categories" onchange="google.script.run.withSuccessHandler(buildSubCategoriesList)
  .getSubCategories()">
<option>Loading...</option>    
</select>

<select id="subCategories">
<option>Loading...</option>    
</select>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
// This code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(buildCategoriesList)
  .getCategories();
});

function buildCategoriesList(sheetsName) {
var list = $('#categories');
list.empty();
for (var i = 0; i < sheetsName.length; i++) {
list.append('<option value="' + sheetsName[i] + '">' + sheetsName[i] + '</option>');
}
}
</script>

<script>
function buildSubCategoriesList(columnsName) {
var list = $('#subCategories');
list.empty();
for (var i = 0; i < columnsName.length; i++) {
list.append('<option value="' + columnsName[i] + '">' + columnsName[i] + '</option>');
}
}
</script>

代码如下:

code.gs

function doGet(request) {
return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

var ss   =  SpreadsheetApp.openById("1BK5urtTzqZ2kc89ZnbeMSIm2-bt4KLNTQghsxn0cXBI");

function getCategories(){
sheetsName = [];
var sheets = ss.getSheets();
for( var i = 0; i < sheets.length; i++ ){
  sheetsName .push(sheets[i].getName() )
};
return sheetsName;
}

function getSubCategories(categories){
columnsName = [];
var sheet = ss.getSheetByName(categories);
var lastCol = sheet.getLastColumn();
var subRange = sheet.getRange("A1"+lastCol);
var columns = subRange.getValues;

for( var i = 0; i < sheets.length; i++ ){
  columnsName .push(columns[i])
};
return columnsName;
}

我已经尝试了很多东西，但我似乎真的无法找到一种方法来完成这项工作。所以我问你们，有什么建议吗？

Answer 1

为了使其正常工作，必须在您的代码中更正一些内容:

• index.html 文件:您调用 getSubCategories()类别选择的 onchange 事件中的函数未传递所选值
• index.html 文件: 填充 <select>带有选项的元素不会触发更改事件 - 因此您需要手动触发它以更新子类别选择
• code.gs 文件: getSubCategories()函数，你的getRange()调用检索到 A 列中的 3 行而不是第 1 行中的 3 个单元格
• code.gs 文件: 再次在getSubCategories()函数你的 getValues 调用必须是 getValues() ;自 getValues()返回一个二维数组，您必须仅从第一个数组项(第一行)获取列值，因此它应该是 getValues()[0]

更正后的工作代码附在下面:

code.gs

var ss   = SpreadsheetApp.openById("1BK5urtTzqZ2kc89ZnbeMSIm2-bt4KLNTQghsxn0cXBI");

function doGet(request) {
  return HtmlService.createTemplateFromFile('index')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function getCategories(){
  var sheetsName = [];
  var sheets = ss.getSheets();
  for( var i = 0; i < sheets.length; i++ ){
    sheetsName.push( sheets[i].getName() )
  }
  return sheetsName;
}

function getSubCategories(categories){
  var columnsName = [];
  var sheet = ss.getSheetByName(categories);
  var subRange = sheet.getRange(1, 1, 1, sheet.getLastColumn());
  var columns = subRange.getValues()[0]; 

  for( var i = 0; i < columns.length; i++ ){
    columnsName.push( columns[i] )
  }
  return columnsName;
}

index.html

<div>
  <select id="categories" onchange="google.script.run.withSuccessHandler(buildSubCategoriesList)
.getSubCategories(this.value)">
    <option>Loading...</option>    
  </select>

  <select id="subCategories">
    <option>Loading...</option>    
  </select>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
// This code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(buildCategoriesList).getCategories();
});

function buildCategoriesList(sheetsName) {
  var list = $('#categories');
  list.empty();
  for (var i = 0; i < sheetsName.length; i++) {
    list.append('<option value="' + sheetsName[i] + '">' + sheetsName[i] + '</option>');
  }
  list.trigger("change");
}

function buildSubCategoriesList(columnsName) {
  console.log(columnsName);
  var list = $('#subCategories');
  list.empty();
  for (var i = 0; i < columnsName.length; i++) {
    list.append('<option value="' + columnsName[i] + '">' + columnsName[i] + '</option>');
  }
}
</script>