【JavaScript】multiple属性付きのSELECT要素から選択された選択肢の値を取得する

今日、職場の後輩くんに質問されて調べた内容をまとめ。
タイトル通り、multiple 属性付きの SELECT 要素から、選択された選択肢の値を取得する方法についてです。
multiple 属性がついていなければ、 document.getElementById('[ID名]').value; で現在選択されている選択肢の値が取得できるのですが、複数選択が可能な状態だと、1つ目の選択肢の値しか取得できませんでした。

参考にさせていただいた記事はこちら。

Javascriptで複数選択SELECT要素の値を取得・設定するサンプル：morituriのブログ
http://blog.livedoor.jp/morituri/archives/54013170.html

全コードはこちら。
まずは HTML から。

<select id="fruit" multiple="multiple">
<option value="apple">リンゴ</option>
<option value="orange">オレンジ</option>
<option value="berry">いちご</option>
<option value="grape">ぶどう</option>
</select>

1行目で multiple="multiple" を指定しているので、複数選択が可能です。

で、JavaScript がこちらです。

const selects = document.getElementById('fruit');
for (let i = 0; i < selects.length; i++) {
  if (selects[i].selected) {
    console.log(selects[i].value);
  }
}

まず、1行目で SELECT 要素を取得し、変数 selects に代入します。
この時、取得した SELECT 要素は、OPTION 要素を配列として持っているので、変数 selects を for ループで回して、OPTION 要素を一つずつ確認していきます。
もし OPTION 要素が選択済みだったら、3行目の if 文の条件式で true が返るので、4行目でその OPTION 要素の value をログに出力しています。

処理としては以上です！
今回は、ただログに OPTION要素の value の値を出力することしか行っていませんので、こちらは任意の処理に書き換えてください。

以上、JavaScript で multiple 属性付きの SELECT 要素から、選択された選択肢の値を取得する方法でした。
ご参考になれば幸いです。