选择器更改基于具有动态列表的先前选择器答案

【问题标题】：Selector Change based on previous selectors with dynamic lists选择器更改基于具有动态列表的先前选择器
【发布时间】：2019-08-01 21:46:54
【问题描述】：

我正在尝试生成一个选择器，该选择器根据之前的选择器填充各种任务。我已经看到了使用 if/else if 块代码的简短方法，但是对于我的每个选择，我都有 20 多个可供选择的选项。

我尝试将选项放在电子表格内的各种工作表上并运行 if/else if 语句，以便下拉列表中填充来自与选择选项关联的工作表之一的任务。

<!--my selection i want to base the next selection options off of-->
<select id = 'reason'>
<option value="" disabled selected>Choose Reason</option>
<option value = 'prec'>PREC</option>
<option value = 'crh'>CRH</option>
<option value = 'bh'>BH</option>
<option value = 'ih'>IH</option>
<option value = 'rh'>RH</option>

</select>
<Label>Call Reason</Label>
</div>

<!-- function that generates tasks dynamically from a sheet -->
function getTasks(){

  var ss= SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName('PREC');
  var list = ws.getRange(1,1).getDataRegion().getValues();
  var options = {};
  list.forEach(function(v){
    options[v[0]]= null;
  });

<!--essentially If someone chose "CRH" I would want it to open the sheet 
with the CRH options -->

The way I wrote the loop didn't work.

function getTasks(){

  var ss= SpreadsheetApp.openByUrl(url);
  var options = {};
//basically added else ifs for each reason with the same code just dif 
//sheet names
  if (document.getElementById('reason')='prec'){
  var ws = ss.getSheetByName('PREC');
  var list = ws.getRange(1,1).getDataRegion().getValues();

  list.forEach(function(v){
    options[v[0]]= null;
}
  });
return options
}

【问题讨论】：

标签： javascript html google-apps-script

【解决方案1】：

Google 网络应用通常由以下部分组成：

.gsfile 中的 Apps 脚本代码
htmlfile 中的 HTML 代码
<script></script> 标签内的 JavaScript 代码

这些组件之间的交互：

在.gs 文件中，必须实现doGet()function 才能创建HTML output
可以从htmlcode 调用 JS 函数，例如<select id = 'reason' onchange="getSheet()">
可以在 <script></script> 部分（或者在 <?...?> scriplets 内）使用 google.script.run 从 JS 调用 Apps 脚本函数，参数可以从 html 文件传递给此函数
可以使用withSuccessHandler 将调用的Apps Script 函数的返回值传回JS

对于您的情况：

可以使用 JS（而不是 Apps 脚本！）部分访问所选的下拉选项

var dropdown=document.getElementById('reason');
var sheet=dropdown.options[dropdown.selectedIndex].value;

需要将所选工作表名称传递给可以访问 SpreadsheetApp 方法的 Apps 脚本函数
Apps Script 函数返回的选项可以返回给 JS 并实现到html 框架中

你可以这样做：

.gs文件：

function doGet() {  
return HtmlService.createHtmlOutputFromFile("index");
}

function getTasks(sheet){
  var ss= SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName(sheet);
  var list = ws.getRange(1,1).getDataRegion().getValues(); 
  var options = {};
  list.forEach(function(v){
    options[v[0]]= null;
  });
  return options;
}

html文件：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div>
    <!--my selection i want to base the next selection options off of-->
<select id = 'reason' onchange="getSheet()">
<option value="" disabled selected>Choose Reason</option>
<option value = 'prec'>PREC</option>
<option value = 'crh'>CRH</option>
<option value = 'bh'>BH</option>
<option value = 'ih'>IH</option>
<option value = 'rh'>RH</option>
</select>
<Label>Call Reason</Label>
</div>
<script>
function getSheet(){
var dropdown=document.getElementById('reason');
var sheet=dropdown.options[dropdown.selectedIndex].value;
console.log(sheet);
google.script.run.withSuccessHandler(onSuccess).getTasks(sheet);
  }
function onSuccess(options) {        
        //do something
      }
</script>
  </body>
</html>

【讨论】：

如果我想做动态多选，你知道这会如何改变吗？仍然将基于工作表的选项更改为列表形式而不是自动完成
类似这样的：stackoverflow.com/questions/5866169/… 您可以遍历所有选项并在 if 语句中执行 google.script.run - 它将针对每个选定的工作表运行。不确定您所说的“列表表单而不是自动完成”是什么意思，我不知道您到底想对工作表数据和列表做什么。在此处查看如何动态创建按钮和 html 页面 - 也许这就是您的意思：stackoverflow.com/questions/57310460/…

【解决方案2】：

我不确定这是否是您的意思 - 为什么不使用“onchange”？

<div>
    <select id = 'reason1' onchange="MyFunction(0)">
    <option value="" disabled selected>Choose Reason</option>
    <option value = 'prec'>PREC</option>
    <option value = 'crh'>CRH</option>
    <option value = 'bh'>BH</option>
    <option value = 'ih'>IH</option>
    <option value = 'rh'>RH</option>

    </select>
    <Label>Call Reason</Label>
    </div>
<div>

<div>
    <select id = 'reason2' onchange="MyFunction(1)"><!--select[1]-->
    <option value="" disabled selected>Choose Reason</option><!--opt[0]-->
    <option value = 'prec2'>PREC</option><!--opt[1]-->
    <option value = 'crh2'>CRH</option><!--opt[2]-->
    <option value = 'bh2'>BH</option><!--opt[3]-->
    <option value = 'ih2'>IH</option><!--opt[4]-->
    <option value = 'rh2'>RH</option><!--opt[5]-->

    </select>
    <Label>Call Reason</Label>
    </div>
<div>

<div>
    <select id = 'reason3' onchange="MyFunction(2)"><!--select[3]-->
    <option value="" disabled selected>Choose Reason</option>
    <option value = 'prec3'>PREC</option>
    <option value = 'crh3'>CRH</option>
    <option value = 'bh3'>BH</option>
    </select>
    <Label>Call Reason</Label>
    </div>
<div>


<script>
function MyFunction(x) {
    //x - position of select in the array
    var selects = [document.getElementById('reason1'), document.getElementById('reason2'), document.getElementById('reason3')]; //store all your selects in an array to easily get them
    var url = 'your url here'; 
    var selectedOption = selects[x].selectedIndex; //index of selected option
    var selectedSelectId = event.target.id; //id of select changed
    var ss = SpreadsheetApp.openByUrl(url);
    var wsName = selectedSelectId + '-' + selectedOption;
    var ws = ss.getSheetByName(wsName); //now you should name each of your spreedsheed "id of the select - option index", for example "reason1-1" for "prec", "reason3-2" for "crh3" etc;
    //rest of your code here
}
</script>

【讨论】：

我认为这不是我想要的。 if reason = prec then these options display if crh a different list 等等问题是我有 20 个prec，crh 为 10，其他为 7，它们都不同
@Samuel Daly，我已经编辑了我的答案，现在对你有帮助吗？
不，我正在使用物化选择器，当它被初始化并且函数正在工作并在控制台中打印正确的选择时，控制台上显示的 id 与 html 中的目标 id 不同/跨度>
我什至不知道这是否有意义，因为我以前从未见过或发生过这种情况