google apps scriptで2段階のセレクトボックスを作りたい

###やりたいこと
私は現在社内で使う用のシステムを開発しています。しかし、プログラミングに関して全くの素人であるためぜひ皆様のお力を貸していただけたらと考えております。以下のシステムを作りたいと考えております。

1.セレクトボックスで人物を選択する
2.選択した人物が担当している会社(複数)を別のセレクトボックスに表示する
但し人物と会社のデータはそれぞれスプレッドシートから取得する。

人物と会社のリストは以下のような形でスプレッドシートに記載してあります。

【人物リスト】

【会社と担当者】

おそらく会社のデータに関しては、webアプリ起動時に全部取得しておいて、人物のセレクトボックスの内容が変わる度にonchangeで会社のセレクトボックスの内容のdisplayをnoneにしていくのかなと思ったのですが、コードの書き方がわかりません。

不躾な質問かもしれませんが、ご回答していただけるとありがたいです。

index.html
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <base target="_top">
6    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
7
8  </head>
9  <body>
10    
11    <form name="form" action="xxxxxxx" method="post">
12    
13      <select id="staffname" onchange="changelist()">
14      </select>
15      
16      <select id="companyname">
17      </select>
18
19
20      <input type="submit" value="確定">
21    </form>
22
23    <script>
24    
25     //名前のプルダウンを作る関数      
26      google.script.run.withSuccessHandler(pulldownstaffname).namearraygenerate();
27      
28      function pulldownstaffname(data){
29      　var values = JSON.parse(data);
30   
31      　for(var i=0;i<values.length;i++){
32       　let op = document.createElement("option");
33       　op.value = values[i][0];  //value値
34       　op.text = values[i][0];   //テキスト値
35       　document.getElementById("staffname").appendChild(op);
36        }
37      }
38      
39      //会社のプルダウンを作る関数
40      google.script.run.withSuccessHandler(pulldowncompany).companyarraygenerate();
41      
42      function pulldowncompany(data){
43      　var values = JSON.parse(data);
44       
45       for(var i=0;i<values.length;i++){
46       　let op = document.createElement("option");
47         op.setAttribute("pic", values[i][0]); //担当者を表すkeyを追加
48       　op.value = values[i][1];  //value値
49       　op.text = values[i][1];   //テキスト値
50        op.style.display="none";
51        op.setAttribute("name","company");//changelist関数用に属性追加
52       　document.getElementById("companyname").appendChild(op);
53        }
54       }
55       
56       function changelist(){
57         
58         var selectedname = document.getElementById('staffname').value; //選ばれた名前
59         
60         var companylist = document.getElementById("companyname").children; //会社の要素のリスト
61         
62         for(var i = 0;i<companylist.length;i++){
63          if(companylist[i].value == selectedname){
64           companylist[i].style.display = "block";
65          }
66         }
67         
68
69         }
70    </script>
71  </body>
72</html>
73

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var dat = new Date();
  //parameterはobject型なのでstring型に変換
  var staffname = e.parameter.staffname.toString();
  sheet.appendRow([date,staffname]);
  return HtmlService.createTemplateFromFile('index').evaluate();
}

var spreadsheet = SpreadsheetApp.openById('xxxxxxxxx')

function namearraygenerate(){
  var sheet = spreadsheet.getSheetByName('namelist');
  var values = sheet.getDataRange().getValues();
  //但しnamevaluesは1×人數の二次元配列である(?)
  return JSON.stringify(values);
}

function companyarraygenerate(){
  var sheet = spreadsheet.getSheetByName('companylist');
  var values = sheet.getDataRange().getValues();
  //但しvaluesは二次元配列である
  Logger.log(values);
  return JSON.stringify(values);
}

papinianus

2020/03/14 00:54

過去2回の質問との違いが分かりません。欲しい答えが出ないから同じ質問を繰り返しているのだと思いますが、同じことを繰り返しても結果に変化はないと思います。 2段階のプルダウンは下記でできているはずです。 https://teratail.com/questions/246345

行動規範の内容に同意します

回答1件

ベストアンサー

これは二段階にわけてプルダウンを作るので、コードは複雑ではないですが、実運用する上で色々考慮しなければならない部分が多いのでやや難易度は上です。

1回目は普通に分類でプルダウンを作り、二回目は選んだ分類を元に別のGAS関数をgoogle.script.run.withSuccessHandlerで取得し、構築する。

selectタグにはonChangeイベントを設けておいてこれを発火させる仕組みが必要です。

ポイントは2個目のgoogle.script.run.withSuccessHandlerで呼び出すGAS関数には選んだ項目を引数で渡し、GAS側ではそれを元にスプレッドシートからフィルタした値を配列で返してあげる点です。以下はそのGAS側の関数です。bunruiで引数をとっています。

javascript
1//抽出用プルダウン用
2function kinoko(bunrui){
3  //シートを取得
4  var ss = SpreadsheetApp.getActiveSpreadsheet();
5  var list = ss.getSheetByName("キノコ名").getRange("A2:C").getValues();
6  
7  //配列を用意
8  var array = [];
9  
10  //bunruiに基づきフィルタした値を配列にpush
11  for(var i = 0;i<list.length;i++){
12    //分類に合致したらpush
13    if(list[i][0] == bunrui){
14      array.push(list[i]);
15    }
16  }
17 
18  //取得データを返す
19  return JSON.stringify(array);
20}