HTMLSelectElement.selectedOptions

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

只读 HTMLSelectElement property selectedOptions contains a list of the <option> elements contained within the <select> element that are currently selected. The list of selected options is an HTMLCollection object with one entry per currently selected option.

An option is considered selected if it has an HTMLOptionElement.selected 属性。

句法

var selectedCollection = HTMLSelectElement.selectedOptions;

值

HTMLCollection which lists every currently selected HTMLOptionElement which is either a child of the HTMLSelectElement or of an HTMLOptGroupElement within the <select> 元素。

In other words, any option contained within the <select> element may be 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 a length of 0.

范例

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

HTML

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

<label for="foods">What do you want to eat?</label><br>
<select id="foods" 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" id="order">
  Order Now
</button>
<p id="output">
</p>

<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 to trigger fetching the HTMLCollection of selected elements using the selected 特性。

JavaScript

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

let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");
orderButton.addEventListener("click", function() {
  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.innerHTML = output;
}, false);

This script sets up a click event listener on the "Order Now" button. When clicked, the event handler fetches the list of selected options using selectedOptions , then iterates over the options in the list. A string is constructed to list the ordered items, with logic to build the list using proper English grammar rules (including a serial comma ).

结果

The resulting content looks like this in action:

规范

规范	状态	注释
HTML 实时标准 The definition of 'HTMLSelectElement.selectedOptions' in that specification.	实时标准	无变化自 HTML5
HTML5 The definition of 'HTMLSelectElement.selectedOptions' in that specification.	推荐	初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`selectedOptions`	Chrome 19	Edge 12	Firefox 26	IE No	Opera 9	Safari 6	WebView Android ≤37	Chrome Android 25	Firefox Android 26	Opera Android 10.1	Safari iOS 6	Samsung Internet Android 1.5

图例

完整支持
不支持

另请参阅

Drop-down content in The native form widgets

元数据

最后修改： 2019 年 3 月 23 日

在此页

句法

值

范例

HTML

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题