スプレッドシートで複数選択できるプルダウンを用意したい

Googleスプレッドシートで、複数選択できるプルダウンを用意したいと思ったことはありませんか?通常のプルダウンでは選択肢の中から一つしか選べませんが、複数選択をしたいケースもありますよね。この記事では、スプレッドシートで複数選択できるプルダウンを用意する方法をご紹介していきます。
スプレッドシートで複数選択できるプルダウンを用意する方法

function showListBox(){
const html = HtmlService.createHtmlOutput(`
<div>
<select id="list" multiple>
<option value="キャベツ">キャベツ</option>
<option value="にんじん">にんじん</option>
<option value="たまねぎ">たまねぎ</option>
<option value="ピーマン">ピーマン</option>
</select>
</div>
<div>
<button onclick="submit()">選択</button>
</div>
<script>
function submit() {
const list = document.getElementById("list");
const arr = [];
for ( const item of list ) {
if ( item.selected ) { arr.push(item.value); }
}
google.script.run.setSelectedValues(arr.join(","));
google.script.host.close();
}
</script>
`);
SpreadsheetApp.getUi().showModalDialog(html, "選択してください");
}
function setSelectedValues(items){
const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
const sheet = spreadsheet.getActiveSheet();
sheet.getRange("C2").setValue(items);
}




