Theread-onlyHTMLSelectElement propertyselectedOptions contains a list of the<option> elements contained within the<select>element that are currently selected. The list of selected options is anHTMLCollection object with one entry per currently selected option.

An option is considered selected if it has anHTMLOptionElement.selectedattribute.

Value

AnHTMLCollection which lists every currently selectedHTMLOptionElement which is either a child of theHTMLSelectElement or of anHTMLOptGroupElement within the<select> element.

In other words, any option contained within the<select> element maybe part of the results, but option groups are not included in the list.

If no options are currently selected, the collection is empty and returns alength of 0.

Examples

In this example, a<select> element with a number of options is usedto let the user order various food items.

HTML

The HTML that creates the selection box and the<option> elementsrepresenting each of the food choices looks like this:

<label for="foods">What do you want to eat?</label><br /><select name="foods" size="7" multiple>  <option value="1">Burrito</option>  <option value="2">Cheeseburger</option>  <option value="3">Double Bacon Burger Supreme</option>  <option value="4">Pepperoni Pizza</option>  <option value="5">Taco</option></select><br /><button name="order">Order Now</button><p></p>

The<select> element is set to allow multiple items to be selected,and it is 7 rows tall. Note also the<button>, whose role it is totrigger fetching theHTMLCollection of selected elements using theselected property.

JavaScript

The JavaScript code that establishes the event handler for the button, as well as theevent handler itself, looks like this:

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 = "Your order for the following items has been placed: ";    }    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 = "You didn't order anything!";  }  outputBox.textContent = output;});

This script sets up aclick event listener on the "Order Now" button. Whenclicked, the event handler fetches the list of selected options usingselectedOptions, then iterates over the options in the list. A string isconstructed to list the ordered items, with logic to build the list using proper Englishgrammar rules (including aserial comma).

Result

The resulting content looks like this in action:

Specifications

Browser compatibility

See also

• Drop-down controls