実現したいこと

Google Foamの回答を集めたスプレッドシートからデータを抽出して表示するウェブアプリを作成したいです。
この時、表示する内容をプルダウンで選択した氏名に応じて変更したいと考えています。

#直面している問題
selectで選択した結果（氏名）をpayment_list()に代入するにはどうすればよいでしょうか。

#コード

function doGet() {
  const htmlOutput = HtmlService.createTemplateFromFile("html").evaluate();
  return htmlOutput;
}


function getSheet(name){
  
  // SSIDからスプレッドシートの取得
  var ssId = 'シートID';
  var ss = SpreadsheetApp.openById(ssId);
 
  // 指定されたシート名からシートを取得して返却
  var sheet = ss.getSheetByName(name);
  return sheet;
}
 
function getData() {
  
  // 指定したシートからデータを取得
  var values = getSheet('フォームの回答 1').getDataRange().getValues();
  
  return values;
}

//抽出用プルダウン用
function payment_list(shimei){
  //シートを取得
  var ssId = 'シートID';
  var ss = SpreadsheetApp.openById(ssId);
  var list = ss.getSheetByName("フォームの回答 1").getRange("A2:J").getValues();

  //配列を用意
  var array = [];
  
  //shimeiに基づきフィルタした値を配列にpush
  for(var i = 0;i<list.length;i++){
    //分類に合致したらpush
    if(String(list[i][6]).indexOf(shimei)>-1){
      array.push(list[i]);
    }
  }
 
  //取得データを返す
  return array;
}

html
1
2<html>
3  <head>
4  </head>
5  <script>
6    function name_select(){
7      let name = document.getElementById('f_name').value;
8      return name
9    }
10  </script>
11
12  <body>
13    <div class = 'rireki'>
14      <h2>精算履歴</h2>
15      <p>名前を選択してください</p>
16      <p><select id="f_name" onchange ='name_select();'>
17      <option hidden>名前を選択</option>
18      <option value="a">a</option>
19      <option value="b">b</option>
20      <option value="c">c</option>
21      <option value="d">d</option>
22      </select></p>
23    </div>
24
25    <table border="1">
26        <?
27          // スプレッドシートからデータを取得
28          var data = getData();
29          var data_2 = payment_list(); ←この関数にselectで選択した氏名を代入したい。
30
31          // テーブルの見出し作成
32          output._='<tr>';
33          output._='<th>' + data[0][1] + '</th>';
34          output._='<th>' + data[0][3] + '</th>';
35          output._='<th>' + data[0][4] + '</th>';
36          output._='<th>' + data[0][5] + '</th>';
37          output._='<th>' + data[0][6] + '</th>';
38          output._='<th>' + data[0][7] + '</th>';
39          output._='<th>' + data[0][8] + '</th>';
40          output._='<th>' + data[0][9] + '</th>';
41          output._='<th>' + data[0][10] + '</th>';
42          output._='</tr>';
43          
44          // テーブルを作成
45          for(var i=0;i<data_2.length;i++){
46            output._='<tr>';
47            output._='<td>' + data_2[i][1] + '</td>';
48            output._='<td>' + data_2[i][3] + '</td>';
49            output._='<td>' + data_2[i][4] + '</td>';
50            output._='<td>' + data_2[i][5] + '</td>';
51            output._='<td>' + data_2[i][6] + '</td>';
52            output._='<td>' + data_2[i][7] + '</td>';
53            output._='<td>' + data_2[i][8] + '</td>';
54            output._='<td>' + data_2[i][9] + '</td>';
55            output._='<td>' + data_2[i][10] + '</td>';
56            output._='</tr>';
57          }
58        ?>
59    </table>
60  </body>
61</html>

#備考
function name_select()の部分でselectsした氏名を取得するところまではできているようですが、それをpayment_list()に代入できない状態です。
payment_list('田中')などのように具体的に氏名を代入した段階では問題なく作動しています。

よろしくお願いします。

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

回答1件

おそらく、HTML上で書いたクライアントコード(function name_select())から、gasのスクリプトに関数を、function payment_list()を呼び出したいということですね。

Class google.script.run を利用してみてください。

html
1  <script>
2    function name_select(){
3      let name = document.getElementById('f_name').value;
4      google.script.run.payment_list(name);
5      return name
6    }
7  </script>
8