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

Question

目标：

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

问题：

我无法通过尝试 google.run 或引用另一个函数来使用事件侦听器填充数组。

示例：

下面我有三个 <select> 字段。第一个是初级。第二个是依赖于第一个的传统数组。第三个 <select> 是我无法从 Apps 脚本服务器端代码获取拉取数组的地方。请记住，我正在尝试根据第一个 <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 脚本函数应将范围名称作为参数：

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

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

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

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

上面的代码还有一些问题...

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

某种程度上的误解是，这些回调函数只接受一个参数，而您的 populate() 接受两个 ...App 脚本应该 return {} 或 [];与 JS 函数声明类似 function populateSelectA(data) {} & function populateSelectB(data) {}。 jQuery 也可用于客户端脚本。

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

Populate HTML Select options based on other HTML Select

html

javascript

sidebar

callback

google-apps-script

目标：

问题：

示例：