HTMLSelectElement：selectedOptions 属性

基线广泛可用

此功能已得到良好建立，可在许多设备和浏览器版本上运行。它自以下时间起在所有浏览器中都可用 2015 年 7 月.

只读HTMLSelectElement 属性selectedOptions包含一个 <option> 元素列表，这些元素包含在当前选定的 <select> 元素中。选定选项的列表是一个 HTMLCollection 对象，每个当前选定的选项对应一个条目。

如果选项具有 HTMLOptionElement.selected 属性，则认为该选项已选定。

值

一个 HTMLCollection，它列出每个当前选定的 HTMLOptionElement，它是 HTMLSelectElement 或 <select> 元素内的 HTMLOptGroupElement 的子元素。

换句话说，<select> 元素中包含的任何选项都可能是结果的一部分，但选项组不包含在列表中。

如果当前没有选中任何选项，则集合为空并返回 length 为 0。

示例

在此示例中，使用带有许多选项的 <select> 元素让用户订购各种食品。

HTML

创建选择框和表示每个食品选择的 <option> 元素的 HTML 如下所示

html

<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> 元素设置为允许选择多个项目，并且高度为 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 = "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;
  },
  false,
);

此脚本在“立即订购”按钮上设置了一个 click 事件侦听器。单击时，事件处理程序使用 selectedOptions 获取选定选项列表，然后遍历列表中的选项。构建一个字符串以列出已订购的项目，并使用正确的英语语法规则（包括串行逗号）构建列表的逻辑。

结果

结果内容在实际操作中如下所示

规范

规范
HTML 标准 # dom-select-selectedoptions-dev

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

下拉控件