現在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