0

現在Google apps scriptを用いて、index.htmlで作成した投稿フォームの値をGoogleスプレットシートに反映させるというコードを作成しております。

その際に、ドロップダウンリストで選択した値を取得しようとすると、以下のエラーが出力されてしまいます。

userCodeAppPanel:26 Uncaught TypeError: Cannot read property 'selectedIndex' of undefined

該当するコードは以下のようになります。
code.gs

//ドロップダウン用データをHTML側に返してあげる関数
function dropman1(){
//シートを取得
var ss = SpreadsheetApp.openById("スプレットシートのID");
var list = ss.getSheetByName("List").getRange("B2:B").getValues();//従業員のリスト
//取得データを返す
return JSON.stringify(list); 
}

index.html

<body>
  <div class ="addNew">
    <div id="employee">
      <img border="0" src="https://officeforest.org/wp/library/ProgressSpinner.gif" width="20" height="20">
    </div>
  </div>

 <script type="text/javascript" >
   function submitPost(){
    const data = {};
    var employee = document.employee;
    var num1 = employee.selectedIndex;
    data.employee = employee.options[num1].value;
    google.script.run.withSuccessHandler(getPostOutput).sendPosts(data);
    console.log(data);
    }
   google.script.run.withSuccessHandler(onSuccess).dropman1();
   function onSuccess(data){
    var json = JSON.parse(data);
    var datalength = json.length;
           //ラベルを入れる
    var html = "<label>従業員氏名:</label><br>";

       //selectタグの頭を入れる
    html += "<select name='employee'><option>氏名を入力して下さい</option>";

       //HTMLデータの生成
    for(var i = 0;i<datalength;i++){
       //空データの場合ループ脱出
    if(json[i] == ""){
        break;
    }
       //オプション項目を追加
    html += "<option>" + json[i] + "</option>"
    }
    //selectタグの下を入れる
    html += "</select><p>";

    //プルダウンメニューを設置する
    document.getElementById("employee").innerHTML = html;
   }
 </script>
</body>

ここで、ドロップダウンリストは、htmlにハードコートするのではなく、スプレットシートのリストを参照したいため、code.gsに関数を記述するようにしました。

上記エラーの解決策のご教示を何卒よろしくお願い申し上げます。
なお、コード作成に際し、参考にしたサイト以下の通りです。

Google Apps Scriptで入力補完とプルダウンを作る:
https://officeforest.org/wp/2019/05/23/google-apps-script%E3%81%A7%E5%85%A5%E5%8A%9B%E8%A3%9C%E5%AE%8C%E3%81%A8%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8B/

JavaScript セレクトボックスの値を取得/設定するサンプル:
https://itsakura.com/js-selectbox

1 件の回答 1

1
var employee = document.employee;

の部分が正しく<select name='employee'>を指していないようです。select要素を正しく取得するには

var employee = document.querySelector("[name=employee]");

のように書き換えてみるのはいかがでしょうか。

2
  • ありがとうございます、こちらで動作しました! Commented 2020年6月18日 9:12
  • 1
    動作してなによりです。解決済みのチェックをつけておくと他の回答者さんの巡回の手間が省けます。
    – himenon
    Commented 2020年6月18日 9:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。