JavaScript 中当前选择的选项

1. 使用 HTMLSelectElement.options 从使用 JavaScript 的选择列表中获取当前选项
2. 使用 HTMLSelectElement.selectedOptions 从使用 JavaScript 的选择列表中获取当前选项

我们可以在网页中使用不同类型的表单，其中每个字段都属于某种类型。有时，我们必须从下拉列表中选择一个选项。<select> 元素用于创建下拉列表。<select> 标签内的 <option> 标签用于定义下拉列表中的选项。

本教程将介绍如何使用 JavaScript 获取 <select> 元素中当前选定的选项。

使用 HTMLSelectElement.options 从使用 JavaScript 的选择列表中获取当前选项

HTMLSelectElement.options 属性返回 <select> 元素中存在的 <option> 元素的 HtmlOptionsCollections。

我们可以创建一个函数来显示列表中所选选项的值。

参考下面的代码

HTML 代码：

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

JavaScript 代码：

var selection = document.getElementById('cars');
function select() {
  alert(selection.options[selection.selectedIndex].value);
}

selectedIndex 返回所选选项的索引。

使用 HTMLSelectElement.selectedOptions 从使用 JavaScript 的选择列表中获取当前选项

这个 HTMLSelectElement.selectedOptions 包含在 <select> 元素中定义的所有 <option> 元素的列表，这些元素被选中。

参考下面的代码。

HTML 代码：

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

JavaScript 代码：

var selection = document.getElementById('cars');
function select() {
  alert(selection.selectedOptions[0].value);
}

此方法通常不适用于 Internet Explorer。