[GAS]セレクトボックスで、どの項目が選択されているか取得したい

前提・実現したいこと

スプレッドシートからユーザー名を、取得し一つ目のセレクトボックスに表示。
その際、その下にあるセレクトボックスの中身は、一つ目のセレクトボックスで現在選択されている
項目に関連のあるものだけ表示させたい

例えば、
xxxxxxxxスプレッドシートに
userとfoodというシートがあり
userには
|Aさん|
|Bさん|
|Cさん|
|Dさん|

foodには


リンゴ	Aさん
バナナ	Cさん
ブドウ	Aさん
サクランボ	Bさん
パイナップル	Aさん
ピーチ	Dさん

となっており、このとき
Aさんが選択されると、リンゴ、ブドウ、パイナップルだけが、セレクトボックスで選択できるようになり
Bさんが選択されると、サクランボだけが選択できるようになる
といった次第です。

発生している問題・エラーメッセージ

ReferenceError: 「document」が定義されていません。

該当のソースコード

html
1<form name="myForm" onsubmit="handleFormSubmit(this)">
2     
3     <select name="user">
4            <?
5          var spreadsheet = SpreadsheetApp.openById('xxxxxxxx');
6          var sheet = spreadsheet.getSheetByName('user');
7          var myData = sheet.getDataRange().getValues();
8          for(var i=0;i<myData.length;i++){
9            output.append('<option value="user">' + myData[i][0] + '</option>');
10          }
11        ?>
12     </select>
13     
14     <select name="food">
15            <?
16          var spreadsheet = SpreadsheetApp.openById('xxxxxxxx');
17          var sheet = spreadsheet.getSheetByName('food');
18          var myData = sheet.getDataRange().getValues();
19          
20          var element = document.myForm.user.value ;
21    
22          for(var i=7;i<myData.length;i++){
23            if(myData[i][2]== element){
24              output.append('<option>' + myData[i][1] + '</option>');
25            }
26          }
27        ?>
28     </select>

よろしくお願いします。

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

回答1件

ベストアンサー

サーバ側処理とクライアント側処理の区別が付いていないコードです。
そのコードがいつ処理されるのかを考えれば、エラーの意味が理解できると思います。

こういう作り方をすれば、動作しました(このままではページ表示直後にフード側のセレクトが潰れてしまいます、概念コードとしてご理解ください)

javascript
1//doGet or doPostがある.gs
2function getUserSelection() {
3  return SpreadsheetApp.openById("xxx").getSheetByName('user').getDataRange().getValues().map(function(e) { return e[0];});
4}
5function getFoodsSelection(key) {
6  return SpreadsheetApp.openById("xxx").getSheetByName('food').getDataRange().getValues().filter(function(e){ return e[1] === key; }).map(function(e) { return e[0];});
7}

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    <form name="myForm" onsubmit="handleFormSubmit(this)">
8     <select name="user" id="user" onchange="google.script.run.withSuccessHandler(changeFoods).getFoodsSelection(this.value);">
9       <? var u = getUserSelection();
10          for(var i = 0; i < u.length; i++) { ?>
11          <option id="<?=u[i]?>" value="<?=u[i]?>"><?=u[i]?></option>
12          <? }?>
13     </select>
14
15     <select name="food" id="food">
16     </select>
17     </form>
18  </body>
19  <script>
20    function changeFoods(t) {
21      const sel = document.getElementById("food");
22      while (sel.firstChild) {
23        sel.removeChild(sel.firstChild);
24      }
25      t.forEach(function(e) { var o = document.createElement("option"); o.value = e; o.text = e; sel.appendChild(o); });
26    }
27  </script>
28</html>