スプレッドシート: 複数選択可能なプルダウンを作る

// To Do 1: デプロイしたWEBアプリのURLを設定する
const API_URL = 'https://script.google.com/macros/s/XXXXX.../exec';

// To Do 2: 複数選択プルダウンのダイアログを起動する条件（およびプルダウンの選択肢）を入力する
const TRIGGERS = [
  { sheetName: 'シート1', col: 1, value: '果物を選択...', options: ['りんご', 'いちご', 'バナナ'] },
  { sheetName: 'シート2', col: 2, value: '楽器を選択...', options: ['ピアノ', 'ギター', 'ドラム'] },
];

/**
 * ユーザーがセルを編集時、複数選択プルダウン対象のセルであればダイアログを表示する
 */
function openMultipleSelect(e) {
  // 編集箇所・入力内容を取得
  const value = e.value;
  const sheetName = e.range.getSheet().getName();
  const row = e.range.getRow();
  const col = e.range.getColumn();

  // 編集箇所・内容に一致するダイアログ起動条件を取得
  const trigger = TRIGGERS.find(trigger =>
    trigger.sheetName === sheetName &&
    trigger.col === col &&
    trigger.value === value
  );

  // 起動条件が存在したらダイアログを表示
  if (trigger) {
    e.range.setValue('');
    const modal = HtmlService.createTemplateFromFile('modal');
    modal.targetCell = { sheetName, row, col };
    modal.options = trigger.options;
    SpreadsheetApp.getUi().showModalDialog(modal.evaluate(), trigger.value);
  }
}

/**
 * ダイアログから送信された値をセルにセットする
 */
function doPost(e) {
  try {
    // POSTされた値を取得
    const { sheetName, row, col, selectedValues } = JSON.parse(e.postData.contents);

    // スプレッドシートに値を書き込む
    SpreadsheetApp
      .getActiveSpreadsheet()
      .getSheetByName(sheetName)
      .getRange(row, col)
      .setValue(selectedValues.join(','));

    // レスポンスを返す
    return ContentService.createTextOutput('Success');
  } catch(error) {
    return ContentService.createTextOutput('Error: ' + error.message);
  }
}

<div>
  <select id="select" style="width: 200px;" multiple></select>
</div>
<div>
  <button onclick="submit()">選択</button>
</div>
<div>
  <small>* Windowsでは [Ctrl] キー、Macでは [command] キーを押しながらクリックすることで複数選択できます。</small>
</div>

<script>
  // 入力中セル情報, 選択肢情報をGAS側から受け取る
  const targetCell = JSON.parse(<?= JSON.stringify(targetCell)?>);
  const options = JSON.parse(<?= JSON.stringify(options)?>);

  // Select要素を取得しoption要素を追加する
  const elemSelect = document.getElementById('select');
  options.forEach(value => {
    const elemOption = document.createElement('option');
    elemOption.value = value; 
    elemOption.text = value;
    elemSelect.add(elemOption);
  });

  /**
   *  [選択]ボタン押下時、APIを叩いて選択した値をシートに書き込む
   */
  function submit() {
    // 選択した値を取得して配列へ
    const selectedValues = [];
    for (const elemOption of elemSelect) {
      if (elemOption.selected) selectedValues.push(elemOption.value);
    }

    // リクエスト送信（POST)
    const url = <?= API_URL ?>;
    fetch(url, {
      method: 'POST',
      body: JSON.stringify({ ...targetCell, selectedValues }),
      mode: 'no-cors',
      headers:{
        'Content-Type': 'application/json'
      }
    })
    .then(() => google.script.host.close() )
  }
</script>

// To Do 1: デプロイしたWEBアプリのURLを設定する
const API_URL = 'https://script.google.com/macros/s/XXXXX.../exec';

// To Do 2: 複数選択プルダウンのダイアログを起動する条件（およびプルダウンの選択肢）を入力する
const TRIGGERS = [
  { sheetName: 'シート1', col: 1, value: '果物を選択...', options: ['りんご', 'いちご', 'バナナ'] },
  { sheetName: 'シート2', col: 2, value: '楽器を選択...', options: ['ピアノ', 'ギター', 'ドラム'] },
];