根据多个菜单的选择级联显示一个数据（Google脚本）

Display a data according to the choice of several menus in cascade (Google Script)

我正在开发一种工具，允许通过在 Google 脚本上创建的表单收集请求。

用户通过级联drop-down 菜单选择站点、区域、区域，最后选择他要提出请求的房间。 我希望能够显示与所选房间相对应的经理，但我不能。应该没有太大的变化，但我只能显示与所选区域相关的内容。

以下是使用的不同代码：

我试过下面的代码，但它不起作用，我不明白为什么

在此先感谢您的帮助，抱歉我的英语不好。

变量区 在第一次定义之后再次重新定义。应该是salle.

正如我昨天承诺的那样，这里有一个 html 模板，专注于依赖级联下拉列表（4 级），源来自 google sheet.

在 gs 方面：

function transfertHeaders() {
  var bdd = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('DB')
  return JSON.stringify(bdd.getRange(1,1,1,bdd.getLastColumn()).getValues())
}
function transfertData() {
  var bdd = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('DB')
  return JSON.stringify(bdd.getRange(2,1,bdd.getLastRow(),bdd.getLastColumn()).getValues())
}

html 侧：

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>

<body>
  <script>
    <? 
      var headers = JSON.parse(transfertHeaders());
    ?>
    var data = JSON.parse(<?=transfertData()?>);
    
    window.onload = function() {
      var level1sel = document.getElementById("level1");
      var level2sel = document.getElementById("level2");
      var level3sel = document.getElementById("level3");
      var level4sel = document.getElementById("level4");
      var dico = new Map()

      for (var i = 0; i < data.length; i++) {
        dico.set(data[i][0],"")
      }
      dico.forEach(function(value, key) {
        level1sel.options[level1sel.options.length] = new Option(key, key);
      })

      level1sel.onchange = function(){
        level2sel.length = 1;
        level3sel.length = 1;
        level4sel.length = 1;
        dico.clear()
        for (var i = 0; i < data.length; i++) {
          if (data[i][0]==this.value) {dico.set(data[i][1],"")}
        }
        dico.forEach(function(value, key) {
          level2sel.options[level2sel.options.length] = new Option(key, key);
        })
      }

      level2sel.onchange = function(){
        level3sel.length = 1;
        level4sel.length = 1;
        var select1 = document.getElementById('level1');
        var value1 = select1.options[select1.selectedIndex].value;
        dico.clear()
        for (var i = 0; i < data.length; i++) {
          if (data[i][1]==this.value && data[i][0]==value1) {dico.set(data[i][2],"")}
        }
        dico.forEach(function(value, key) {
          level3sel.options[level3sel.options.length] = new Option(key, key);
        })
      }

      level3sel.onchange = function(){
        level4sel.length = 1;
        var select1 = document.getElementById('level1');
        var value1 = select1.options[select1.selectedIndex].value;
        var select2 = document.getElementById('level2');
        var value2 = select2.options[select2.selectedIndex].value;
        dico.clear()
        for (var i = 0; i < data.length; i++) {
          if (data[i][2]==this.value && data[i][0]==value1 && data[i][1]==value2) {dico.set(data[i][3],"")}
        }
        dico.forEach(function(value, key) {
          level4sel.options[level4sel.options.length] = new Option(key, key);
        })
      }

    }
  
  </script>
  <h3>Cascading Dropdown</h3>
  <form name="form" id="form" >
    <?!= headers[0][0] ?>: <select name="level1" id="level1">
      <option value="" selected="selected">Select <?!= headers[0][0] ?></option>
    </select>
    <br>
    <?!= headers[0][1] ?>: <select name="level2" id="level2">
      <option value="" selected="selected">Please select <?!= headers[0][0] ?> first</option>
    </select>
    <br>
    <?!= headers[0][2] ?>: <select name="level3" id="level3">
      <option value="" selected="selected">Please select <?!= headers[0][1] ?> first</option>
    </select>
    <br>
    <?!= headers[0][3] ?>: <select name="level4" id="level4">
      <option value="" selected="selected">Please select <?!= headers[0][2] ?> first</option>
    </select>
    <br>
  </form>

</body>
</html>