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

【问题标题】：Populate HTML Select options based on other HTML Select根据其他 HTML Select 填充 HTML Select 选项
【发布时间】：2018-08-15 15:39:07
【问题描述】：

目标：

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

问题：

我无法使用 eventlistener、尝试 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>

任何帮助将不胜感激！

【问题讨论】：

我没有看到一个名为onSuccess的函数你添加了一个成功处理方法：google.script.run.withSuccessHandler(onSuccess)
请查看（他们也有例子！）developers.google.com/apps-script/guides/html/communication
开发人员示例对我来说太模糊了，并且尝试使用以前条件中的不同数组引用相同的 ID。真的很难过，但我也是新手。

标签： javascript html google-apps-script callback sidebar

【解决方案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');

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

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

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

【讨论】：