时间戳

首页 > 解决方案 > 选择器更改基于具有动态列表的先前选择器

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

问题描述

我正在尝试生成一个选择器，该选择器根据以前的选择器填充各种任务。我已经看到了使用 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
}

标签： javascripthtmlgoogle-apps-script

解决方案

Google Web App 通常由以下部分组成：

  • .gs文件中的 Apps 脚本代码

  • html文件中的 HTML 代码

  • 标签内的 JavaScript<script></script>代码

这些组件之间的交互：

对于您的情况：

  • 选择的下拉选项可以使用 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>

推荐阅读