Question

目标：

在边栏中，为表单显示两个<select>选项。第二个<select>取决于第一个的选择。第二个<select>将通过Google Apps脚本调用适当的数组。

问题：

我无法通过事件监听器，尝试google.run或引用其他函数来填充数组。

示例：

下面有三个<select>字段。首先是主要的。第二个是依赖于第一个的传统数组。第三个<select>是我无法从Apps Script服务器端代码获取提取数组的地方。请记住，我正在尝试根据第一个<select>提取不同的数组。

//Google Apps Script
function Array1() {
  var rng = SpreadsheetApp.getActiveSpreadsheet().getRangeByName('perTwo').getValues();
  Logger.log(rng);
  return rng;
}

function getValuesForRngActive(students_active) {
  var rngValues = SpreadsheetApp.getActiveSpreadsheet().getRangeByName('students_active').getValues();
  return rngValues.sort();
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>Entry Selection</h2>
<hr> Period:
<select id="slct1" onchange="populate('slct1','slct2'); populate2('slct3')">
    <option value=""></option>
    <option value="1">Per 1</option>
    <option value="2">Per 2</option>
    <option value="3">Per 3</option>
</select>

<hr> Student:
<select id="slct2" onchange="myFunction()"></select>

<hr> New Dependent:
<select id="slct3"></select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p> 
</body>

<script>
function populate(s1, s2) {
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  s2.innerHTML = "";
  
  if(s1.value == "1") {
    var optionArray = ["i10", "i20", "Verna"];
  }
  else if (s1.value == "2") {
    var optionArray = ["Last2, First2", "Student, Ima", ""];
  }
  else if (s1.value == "3") {
    var optionArray = ["i10", "i20", "Verna"];
  }
    
  for (var i = 0; i < optionArray.length; i++) {
    var newOption = document.createElement('option');
    newOption.value = optionArray[i];
    newOption.innerHTML = optionArray[i];
    s2.appendChild(newOption);
  }
}

function myFunction() {
    var x = document.getElementById("slct2").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
}

function populate2(s3) {
  var s1 = document.getElementById('slct1');
  var s3 = document.getElementById(s3);
  s3.innerHTML = "";
  
  if(s1.value == "1") {
    var optionArray =  google.script.run.Array1();
  }
  else if (s1.value == "2") {
    var optionArray = ["Last2, First2", "Student, Ima", ""];
  }
  else if (s1.value == "3") {
    var optionArray =  google.script.run.withSuccessHandler(onSuccess).getValuesForRngActive('students_active');
  }
    
  for (var i = 0; i < optionArray.length; i++) {
    var newOption = document.createElement('option');
    newOption.value = optionArray[i];
    newOption.innerHTML = optionArray[i];
    s3.appendChild(newOption);
  }
}
</script>

<script>
  // Using the "load" event to execute the function "populate"
  window.addEventListener('load', populate2);
</script>
</html>

任何帮助将不胜感激！

Answer 1

App Script函数应将范围名称作为参数：

function getValuesForRange(rangeName) {
    var rngValues = SpreadsheetApp
      .getActiveSpreadsheet()
      .getRangeByName(rangeName)
      .getValues();
    return rngValues.sort();
}

以便可以将范围名称students_active传递到App Script函数中

...，它的成功处理程序回调可能应该是populateSelectA()。

google.script.run
  .withSuccessHandler(populateSelectA)
  .getValuesForRange('students_active');

上述代码还有其他一些问题...

这至少可以使您用<select>填充一个<option>。

以某种方式的误解是，这些回调函数仅接受一个参数，而您的populate()接受两个... App脚本应返回{}或[]； function populateSelectA(data) {}和function populateSelectB(data) {}之类的JS函数声明。 jQuery也可以用于客户端脚本。

根据其他HTML Select填充HTML Select选项

目标：

问题：

示例：

1 个答案: