HTMLSelectElement: selectedOptions プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
読み取り専用の HTMLSelectElement の selectedOptions プロパティは、この <select> 要素にある現在選択中の <option> のリストが入ります。選択中の選択肢のリストは HTMLCollection オブジェクトで、選択中の選択肢ごとに 1 項目ずつ入ります。
選択肢は HTMLOptionElement.selected 属性を持つ場合に選択されたとみなされます。
値
HTMLCollection で、HTMLSelectElement または <select> 内にある HTMLOptGroupElement の子である現在選択中の HTMLOptionElement すべてが入ります。
つまり、<select> 要素に含まれる選択肢はすべて結果に含まれますが、選択肢グループはリストに含まれません。
現在選択中の選択肢がない場合は、コレクションは空になり、length は 0 になります。
例
この例では、いくつかの選択肢を持つ <select> 要素を使用し、ユーザーがさまざまな食べ物を注文できるようにしています。
HTML
選択ボックスと、それぞれの食べ物の選択肢を表す <option> 要素を生成する HTML は次のようになります。
<label for="foods">何を召し上がりますか？</label><br /> <select id="foods" name="foods" size="7" multiple> <option value="1">ブリトー</option> <option value="2">チーズバーガー</option> <option value="3">特上ダブルベーコンバーガー</option> <option value="4">ペパロニピザ</option> <option value="5">タコス</option> </select> <br /> <button name="order" id="order">注文する</button> <p id="output"></p> <select> 要素は、複数の項目を選択できるように設定されており、7 行の高さになっています。また、<button> は、selected プロパティを使用して、選択された要素の HTMLCollection を取得するトリガーとなる役割を担っています。
JavaScript
ボタンのイベントハンドラーを確立する JavaScript のコードと、イベントハンドラー自体は次のようになっています。
let orderButton = document.getElementById("order"); let itemList = document.getElementById("foods"); let outputBox = document.getElementById("output"); orderButton.addEventListener( "click", () => { let collection = itemList.selectedOptions; let output = ""; for (let i = 0; i < collection.length; i++) { if (output === "") { output = "次の商品の注文を行いました: "; } output += collection[i].label; if (i === collection.length - 2 && collection.length < 3) { output += " and "; } else if (i < collection.length - 2) { output += ", "; } else if (i === collection.length - 2) { output += ", and "; } } if (output === "") { output = "何も注文していません。"; } outputBox.innerHTML = output; }, false, ); このスクリプトは、「注文する」ボタンの click イベントリスナーを設定します。クリックされると、イベントハンドラーは selectedOptions を使って選択された選択肢のリストを取得し、リスト内の選択肢を繰り返し処理します。順番に並べられた項目を列挙するために文字列が作成され、適切な英語の文法ルール（シリアルカンマ を含む）を使ってリストを作成するロジックがあります。
結果
出来上がったコンテンツを実際に見てみると、こんな感じです。
仕様書
| Specification |
|---|
| HTML # dom-select-selectedoptions-dev |